1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>20-Canvas形变</title>

 6     <style>

 7         *{

 8             margin: 0;

 9             padding: 0;

10         }

11         canvas{

12             display: block;

13             margin: 0 auto;

14             background: red;

15         }

16     </style>

17 </head>

18 <body>

19 <canvas width="500" height="400"></canvas>

20 <script>

21     // 1.拿到canvas

22     let oCanvas = document.querySelector("canvas");

23     // 2.从canvas中拿到绘图工具

24     let oCtx = oCanvas.getContext("2d");

25     // 注意点: 在canvas中所有的形变属性操作的都是坐标系, 而不是图形

26

27     // 所以，要先改变坐标系的位置，才能绘制图形，不然，就会失效

28     // oCtx.translate(100, 0);

29     // oCtx.translate(0, 100);

30     // oCtx.translate(100, 100);

31     // oCtx.rotate(Math.PI/6);

32

33     oCtx.scale(0.5, 1);

34     // 3.绘制一个矩形

35     oCtx.strokeRect(100, 100, 200, 100);

36

37 </script>

38 </body>

39 </html>

20-canvas之形变的更多相关文章

  1. 2015.4.20 Canvas Jquery 移动端 JavaScript

    1.分享效果:弹窗Canvas渲染大图.   2.进度条中表现进度百分比的数值d%,根据进度的增长“字体颜色”为了表示清晰也随着变化 解决方法:参考Demo.   3.输入框保持查询参数,结果列表局部 ...

  2. HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. Core Canvas–Day1

    绘制 1.坐标系统: canvas的坐标以左上角为原点,如图 可对canvas的坐标系统进行变换,变换的方式有 平移translate 旋转rotate 缩放scale 创建自定义的变换方式,切变 2 ...

  4. canvas刮刮乐效果（pc端&H5、zepto-touchmove）

    一.html <div id="canvasArea" style="width:300px;height:200px;position:relative;&quo ...

  5. canvas学习笔记：小小滴公式，大大滴乐趣

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近想弄一个网页,把自己学HTML5过程中做的部分DEMO放上去做集合,但是,如果就仅仅做个网页把所有DEMO一个一个排列又觉得太难看了. ...

  6. 结合ItemsControl在Canvas中动态添加控件的最MVVM的方式

    今天很开心的收获: ItemsControl 中 ItemsPanel的重定义和 ItemContainerStyle 以及 ItemTemplate 三者的巧妙结合,在后台代码不实例化任何控件的前提 ...

  7. html5 Canvas API

    详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现C ...

  8. Andriod中绘(画)图----Canvas的使用具体解释

    转载请注明出处:http://blog.csdn.net/qinjuning     因为在网络上找到关于Canvas的使用都比較抽象,或许是我的逻辑思维不太好吧,总是感觉理解起来比較困难, 尤其是对 ...

  9. 重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGrid, VariableSizedWrapGrid

    原文:重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGr ...

  10. Android中Canvas绘图基础详解（附源码下载） (转)

    Android中Canvas绘图基础详解(附源码下载) 原文链接  http://blog.csdn.net/iispring/article/details/49770651   AndroidCa ...

随机推荐

  1. HTML5画布-小球碰撞

    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` HTML5画布-小球碰撞 日期:2017-7-18 阿珏 ...

  2. 5分钟了解LangChain的路由链

    上上篇文章<5分钟理透LangChain的Chain>里用到了顺序链SequentialChain,它可以将多个链按顺序串起来.本文介绍LangChain里的另外1个重要的链:路由链. 1 ...

  3. windows10下安装mysql8.0.25

    只是安装一个练习用的库,所以基本配置没有什么好说的. # this is a config file for mysql [mysqld] # 设置3306端口 port=7799 # 设置mysql ...

  4. Golang线程池gpool

    背景 golang中使用并发要考虑很多问题,如控制并发量.等待Goroutine执行完毕等. 看下面一段代码: var wg sync.WaitGroup count := 10 wg.Add(cou ...

  5. Bloom Filter布隆过滤器

    简介 本质上布隆过滤器是一种数据结构,比较巧妙的概率型数据结构(probabilistic data structure),特点是高效地插入和查询,可以用来告诉你 "某样东西一定不存在或者可 ...

  6. k8s集群搭建及对一些组件的简单理解（二）

    背景 前面写了一篇,k8s集群搭建及对一些组件的简单理解(一),主要讲了下背景和对一些组件的理解. 今天讲一下正式的安装,有网环境的,后续再说下无外网环境纯内网的. k8s集群节点.组件 控制面节点, ...

  7. bean的二次加工-Spring5.X后置处理器BeanPostProcessor

    什么是BeanPostProcessor 是Spring IOC容器给我们提供的一个扩展接口 在调用初始化方法前后对Bean进行额外加工,ApplicationContext会自动扫描实现了BeanP ...

  8. .NET 9 预览版 5 发布

    微软在6月发布了.NET 9预览版的第五个版本.这个新版本的框架预计将在今年晚些时候正式发布,它是一个标准支持(STS)版本,将在2024年11月12日至2026年5月12日期间在多个操作系统上获得1 ...

  9. 构筑开放式大数据架构，Apache Kyuubi和NDH荣登开源OSCAR

    [点击了解更多网易大数据技术] 在9月16日召开的"2022 OSCAR开源产业大会"上,中国信息通信研究院发布了一系列开源研究成果和开源表彰,网易数帆发起的开源项目Apache ...

  10. Git 奇幻之旅⌛️

    第一天: 本地仓库 故事的主角是小明,一个刚入门编程的小白.他正在为一个项目写代码,但是他发现每次修改代码都很麻烦,因为他要不断地备份文件,而且很容易弄混版本.有一天,他听说了一个叫 Git 的神奇工 ...