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. 社会工程学——进行IP追踪

    如果目标对象有一个公开的邮箱,可以往这个邮箱地址发试探性的Email,然后看看该邮件是否有[回信],从而了解对象是否在线.(注:这招是社会工程学的基本伎俩) 说一个稍微高级点的邮件技巧--[不依赖回信 ...

  2. JS弱类型语言的优势——之模板字符串

    ES6中,开始支持模板字符串. 尽管Java和C#这样的高级语言有非常多吸引人的地方,但是想js这样的弱类型语言,也有独到之处. equType:有四种类型,分别是:chl.chwp.cwp.cot, ...

  3. python selenium使用无头模式执行用例

    什么是无头模式? Headless Browser模式是浏览器的无界面状态,即在不打开浏览器界面的情况下使用浏览器. 该模式的好处如下: 1)可以加快web自动化测试的执行时间,对于web自动化测试, ...

  4. python 使用pandas修改数据到excel，报“SettingwithCopyWarning A value is trying to be set on a copy of a slice from a DataFrame”的解决方法

    场景: 通过pandas模块,将测试数据回写到excel,测试数据有写到excel文件,但控制台输出警告信息如下 警告: SettingwithCopyWarning A value is tryin ...

  5. NVIDIA Jetson AGX Xavier 从刷机之后到配置环境

    特殊的配置环境需求: cuda-10.2.python 3.6.9.torch 1.7.0.torchversion 0.8.1,剩下的顺其自然即可(逃. 顺便说一句,里面的指令请一行一行仔细复制粘贴 ...

  6. k8s livenessprobe和readinessprobe详解

    一.为什么需要容器探针 如何保持Pod健康 只要将pod调度到某个节点,Kubelet就会运行pod的容器,如果该pod的容器有一个或者所有的都终止运行(容器的主进程崩溃),Kubelet将重启容器, ...

  7. ST 表整体二分解法

    整体二分时遍历数组从 \(mid\) 开始的最大值再合并就可以了,时间 \(O(n \log n + q)\) 空间 \(O(n)\). #include<bits/stdc++.h> / ...

  8. 一个简单的html时间显示页面-可做小工具

    代码由 chatgpt3.5 生成,已验证 index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...

  9. docker-compose的使用和常用命令

    Docker简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化. ...

  10. Vscode连接虚拟机报错

    Vscode 连接虚拟机报错问题解决 问题解释 Permission denied, please try again.出现这个问题通常表示身份验证失败. 可能的原因有 SSH用户密码错误 SSH端口 ...