1. 图形变换

canvas是基于状态绘制图形的。故此一般情况下,canvas的绘制的图形路径和状态时分离的。

  1. function drawShape(ctx){
  2.  
  3. // 绘制路径
  4. shapePath(ctx);
  5.  
  6. // 进行填充或者绘制
  7. // ...
  8. }
  9.  
  10. function shapePath(ctx){
  11.  
  12. ctx.beginPath();
  13.  
  14. // 图形路径
  15. // ...
  16.  
  17. ctx.closePath();
  18.  
  19. }

在填充或绘制之前可以调用一些状态或者图形变换的来设置当前绘制图形的状态。

这里所说的图形变换大致指的就是:

1> 位移 translate(x,y) : 将canvas画布进行位移显示。将坐标原点移动到(x,y)的位置,translate将原点移动之后,如果再次调用translate进行移动,那么会依照上一个translate移动之后作为原点参考。

2> 旋转 rotate(deg) : 将canvas画布进行旋转显示

3> 缩放 scale(sx,sy) : 将canvas画布进行缩放显示

2.canvas状态的保存和恢复

save()函数:保存当前的图形状态

restore()函数:返回save()函数保存时候的状态

  1. function drawShape(ctx){
  2.  
  3. ctx.save(); // 状态保存
  4.  
  5. // 绘制路径
  6. shapePath(ctx);
  7.  
  8. // 进行填充或者绘制
  9. // ...
  10.  
  11. ctx.restore(); // 状态恢复
  12. }
  13.  
  14. function shapePath(ctx){
  15.  
  16. ctx.beginPath();
  17.  
  18. // 图形路径
  19. // ...
  20.  
  21. ctx.closePath();
  22.  
  23. }

3. 变换矩阵

transform(a,b,c,d,e,f)状态会叠加。

setTransform(a,b,c,d,e,f)将变换矩阵首先变成单位矩阵,然后在对传入的参数进行图形变换,会忽略之前所有的transform操作。

HTML5-Canvas 图形变换+状态保存的更多相关文章

  1. HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  3. HTML5之图形变换

    - Transformations scale(0.5,0.5) 缩放 rotate(0.175) 旋转 translate(100,50) 位移 - 代码结构 context.scale(x, y) ...

  4. HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. HTML5 Canvas ( 图形变换矩阵 ) transform, setTransform

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Canvas 总结,到第4章 canvas图形变换

    canvas 必须认识到的大坑 <!-- 重点: 在js/canvas标签中定义的宽和高是画布实际的宽和高. 在样式表中定义的宽和高是画布缩放后的宽和高. 即:把js/canvas实际大小缩放到 ...

  7. html5 canvas缩放变换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. HTML5 Canvas ( 图形的阴影 ) shadowColor, shadowOffsetX, shadowOffsetY, shadowNlur

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. MVC+LINQToSQL的Repository模式之(二)数据基类

    namespace Data.TEST{    /// <summary>    /// 数据操作基类    /// </summary>    public abstract ...

  2. Word揭秘:公式还能这么玩!

    如今办公室里用Word来处理资料文档一种再普遍不过的现象了,学校的老师出试卷也离不开它.用Word编辑公式也是一个非常的技巧,玩转Word的同时,你玩转公式了吗?想要在Word中编辑公式,可不是说说就 ...

  3. linux数据盘分区以及格式化

    首先切换到root账户下  sudo -i 手动格式化 请根据以下步骤对数据盘进行分区以及格式化,并挂载分区使数据盘可用. 注:执行以下命令时,请注意修改数据盘符,可以使用”fdisk -l”查看盘符 ...

  4. centos无法联网解决方法

    1)进入 /etc/sysconfig/network-scripts/ 2)vi 或 vim 打开 ifcfg-eth0(不一定是eth0,这个自己判断了) 3)将 ONBOOT=no 改成 ONB ...

  5. 使用fetch-jsonp进行跨域以及参数的传递

    其实fetch-jsonp的官方文档里面已经写得很详细了,连接如下:https://github.com/camsong/fetch-jsonp:但是由于它本身没有多少demo,所以自己在上手的时候遇 ...

  6. iOS实现传递不定长的多个参数

    我们在使用苹果官方的文档的时候会发现可传不定数的参数例如: // [[UIAlertView alloc]initWithTitle:<#(nullable NSString *)#> m ...

  7. JS-简单地匀速运动框架

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. JQuery中$.ajax()方法参数详解 转载

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

  9. 微信小程序5.2.2版本,找不着resource下exml皮肤

    问题描述: egret engine 5.2.2 原来5.1.11好好的,一升级就跪了 新建一个项目,找不到皮肤... 已发到论坛问去了,现在只能手动复制皮肤到小游戏目录下... 解决方案: 卸载重新 ...

  10. python环境杂谈

    最近发现集群里的服务器上有多个python环境,版本相同的python也有多个,主要区别是site-packages里安装的模块不同,这样配置的好处是不同类型的项目可以使用自己的python环境,不会 ...