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. 在System身份运行的.NET程序中以指定的用户身份启动可交互式进程

    今天在技术群里,石头哥向大家提了个问题:"如何在一个以System身份运行的.NET程序(Windows Services)中,以其它活动的用户身份启动可交互式进程(桌面应用程序.控制台程序 ...

  2. 【长文】带你搞明白Redis

    本文使用第一人称来介绍Redis 一.概述 Redis,英文全称是Remote Dictionary Server(远程字典服务),是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化 ...

  3. SpringBoot动态数据源配置

    SpringBoot动态数据源配置 序:数据源动态切换流程图如下: 1:pom.xml文件依赖声明 <dependency>   <groupId>org.springfram ...

  4. Kubernetes（五） Pod控制器详解

    Pod控制器详解 本章主要介绍Pod控制器的详细使用 1. Pod控制器介绍 在kubernetes中,按照pod的创建方式可以将其分为2类: 自主式pod:kubernetes直接创建出来的pod, ...

  5. 详细讲解 Keil Pack Installer，以及通过 Keil 官网获取 Pack

    前言 大家好,我是梁国庆. 收到粉丝留言,说 Keil 安装 Pack 不太明白,可不可以详细演示一下? 当然可以有,直接视频+文章全部安排,我就是宠粉. PS:第一次录视频有些紧张,见谅哈. 微信视 ...

  6. Ubuntu下的NVIDIA显卡【驱动&CUDA 安装与卸载】

    碎碎念:主要是把显卡相关的整合出来,基础知识后面再放上来 显卡安装后可以有效降低电脑开太多界面卡顿hhh现象,不过如果显卡不好的话或者是独显的话 问题也不大,主要是学习 learning 使用 参考资 ...

  7. SpringBoot学习篇

    什么是SpringBoot?为什么要用SpringBoot 用来简化spring应用的初始搭建以及开发过程 使用特定的方式来进行配置(properties或yml文件) 创建独立的spring引用程序 ...

  8. Vue3 如何接入 i18n 实现国际化多语言

    1. 基本方法 在 Vue.js 3 中实现网页的国际化多语言,最常用的包是 vue-i18n,通常我们会与 vue-i18n-routing 一起使用. vue-i18n 负责根据当前页面的语言渲染 ...

  9. 小程序-云数据库的add,get,remove,update

    云数据库的使用就是使用简单的原生封装wx.cloud.database().collection("list"),然后就是add,get,remove,update四个方法 初始化 ...

  10. Netcode for Entities如何添加自定义序列化，让GhostField支持任意类型？以int3为例（1.2.3版本）

    一句话省流:很麻烦也很抽象,能用内置支持的类型就尽量用. 首先看文档.官方文档里一开头就列出了所有内置的支持的类型:Ghost Type Templates 其中Entity类型需要特别注意一下:在同 ...