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. 实验9.单臂路由实现Vlan互通实验

    # 单臂路由实现Vlan互通实验 本实验用于测试单臂路由方式实现Vlan路由. 实验组 实验过程 SW int g0/0/1 port link-type access port default vl ...

  2. Android系统启动：.rc文件

    Android系统启动:.rc文件 reference : https://www.jianshu.com/p/a4c17f0110d0 以init.rc为例. .rc文件 init.rc文件由系统第 ...

  3. 案例源码公开！分享瑞芯微RK3568J与FPGA的PCIe通信案例，嵌入式必读！

    ​ ARM + FPGA架构有何种优势 近年来,随着中国新基建.中国制造2025的持续推进,单ARM处理器越来越难满足工业现场的功能要求,特别是能源电力.工业控制.智慧医疗等行业通常需要ARM + F ...

  4. logo2

  5. SQL注入方法

    目录 前言 如何测试与利用注入点 手工 注入思路 工具 sqlmap -r -u -m --level --risk -v -p --threads -batch-smart --os-shell - ...

  6. JavaSE进阶核心之class类

    Java顶级对象之Object 什么是Object类 Object类位于java.lang包中,java.lang包包含着Java最基础和核心的类,在编译时会自动导入 Object类是所有java类的 ...

  7. 基于JQ使用原生js构造一个自动回复随机消息的机器人

    某些业务会使用到页面里存在一个机器人,类似于假客服一样,可以回复游客的问题. 那么如何自己写一个自动回复消息的机器人呢? 源码献上 /** * 基于jq的自动对话机器人 * @param {Objec ...

  8. Java-用户登录验证案例

    用户登录验证 1.案例需求: 1.访问带有验证码的登录页面login.jsp 2.用户输入用户名,密码以及验证码 * 如果用户名和密码输入有误,跳转登录页面,提示:用户名或密码错误 * 如果验证码输入 ...

  9. 扬州万方：基于申威平台的 Curve 块存储在高性能和超融合场景下的实践

    背景 扬州万方科技股份有限公司主要从事通信.计算机和服务器.智能车辆.基础软件等产品的科研生产,是国家高新技术企业.专精特新小巨人企业.国家火炬计划承担单位. 业务介绍 申威处理器是在国家" ...

  10. Known框架实战演练——进销存系统需求

    概述 该项目是一个开源.简易.轻量级的进销存管理系统,作为Known框架的实战演练项目. 项目代码:JxcLite 开源地址: https://gitee.com/known/JxcLite 功能模块 ...