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. LLM技术全景图：技术人必备的技术指南，一张图带你掌握从基础设施到AI应用的全面梳理

    LLM技术全景图:技术人必备的技术指南,一张图带你掌握从基础设施到AI应用的全面梳理 LLM 技术图谱(LLM Tech Map)是将 LLM 相关技术进行系统化和图形化的呈现,此图谱主要特点是&qu ...

  2. 【WPF】根据选项值显示不同的编辑控件（使用DataTemplateSelector）

    接了一个小杂毛项目,大概情形是这样的:ZWT先生开的店是卖拆片机的,Z先生不仅卖机器,还贴心地提供一项服务:可以根据顾客需要修改两个电机的转向和转速(机器厂家有给SDK的,但Z自己不会写程序).厂家有 ...

  3. Java全局唯一ID生成策略

    在分布式系统中常会需要生成系统唯一ID,生成ID有很多方法,根据不同的生成策略,以满足不同的场景.需求以及性能要求. 1.数据库自增序列 这是最常见的一种方式,利用DB来生成全库唯一ID. 优点: 此 ...

  4. django.db.utils.InternalError: (1050, "Table 'app01_book_author' already exists")

    Django项目在执行 python manage.py migrate进行表迁移时报错 错误截图: 解决方法执行: 问题解决!!!

  5. dubbo面试题及答案

    Dubbo是什么? Dubbo是阿里巴巴开源的基于 Java 的高性能 RPC 分布式服务框架,现已成为 Apache 基金会孵化项目. 面试官问你如果这个都不清楚,那下面的就没必要问了. 官网:ht ...

  6. 利用SpringBoot+rabbitmq 实现邮件异步发送，保证100%投递成功

    在之前的文章中,我们详细介绍了 SpringBoot 整合 mail 实现各类邮件的自动推送服务. 但是这类服务通常不稳定,当出现网络异常的时候,会导致邮件推送失败. 本篇文章将介绍另一种高可靠的服务 ...

  7. 在windows双系统中，nginx配置虚拟域名

    比如在ubuntu系统中,nginx配置了域名www.abc.com, 那么需要在终端 sudo vim /etc/hosts文件中配置域名,如下: 127.0.0.1 www.abc.com 即可访 ...

  8. TypeScript 学习笔记 — 接口的使用（六）

    目录 一.函数接口参数 二.函数类型接口 三.函数混合类型 四.对象接口(最常用) 确定属性 可选属性 任意属性 只读属性 可索引接口 索引访问符 类接口 接口继承 构造函数类型 type 和 int ...

  9. Vue 数组和对象更新，但视图未更新，背后的故事

    在实际开发中,遇到遍历数组和对象,当property 发生改变时,并没有触发视图的更新今天来浅显的聊聊这背后的故事,有说的不对地方,还望指出! 本人博文地址:https://www.cnblogs.c ...

  10. oeasy教您玩转vim - 31 - # 文字区块

    ​ 文字区块 回忆上节课内容 上上次讲的翻页 上次先让屏幕位置固定,移动光标 H- Head 移动到屏幕的顶端 M- Middle 移动到屏幕的中间 L- Low 移动到屏幕的底部 然后让光标固定,移 ...