1. 图形变换

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

function drawShape(ctx){

    // 绘制路径
shapePath(ctx); // 进行填充或者绘制
// ...
} function shapePath(ctx){ ctx.beginPath(); // 图形路径
// ... ctx.closePath(); }

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

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

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

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

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

2.canvas状态的保存和恢复

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

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

function drawShape(ctx){

    ctx.save(); // 状态保存

    // 绘制路径
shapePath(ctx); // 进行填充或者绘制
// ... ctx.restore(); // 状态恢复
} function shapePath(ctx){ ctx.beginPath(); // 图形路径
// ... ctx.closePath(); }

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. Vuforia AR实战教程

    官网:https://developer.vuforia.com/ Vuforia AR实战教程 http://www.taikr.com/my/course/531. AQaVpF//////AAA ...

  2. 【matlab】图像去噪的代码测试

    %% 自己设置频域的滤波窗口 girl=imread('F:\Users\*****\Pictures\CGS_stripe1.bmp'); girl=rgb2gray(girl); girl=im2 ...

  3. cesium可视化空间数据2

    圆柱圆锥体 <!DOCTYPE html> <html> <head> <!-- Use correct character set. --> < ...

  4. mongodb启动时报错ERROR: child process failed, exited with error number 1

    不多说,直接上干货! 前期博客 Ubuntu14.04下Mongodb安装部署步骤(图文详解) Ubuntu16.04下Mongodb安装部署步骤(图文详解) root@zhouls-virtual- ...

  5. Java------遍历Map<k,v>的方法

    1. public class MapAction extends ActionSupport{ private Map<String, User> map = new HashMap&l ...

  6. 使用select多选标签笔记

    之前一直用checkbox做多选,其实 select也可以多选,只要多给一个属性即可.标签属性 http://www.w3school.com.cn/tags/att_select_multiple. ...

  7. kafka原理

    今天因为工作接触kafka,先说说kafka是干嘛的. kafka: 说简单点他就是一个基于分布式的消息发布-订阅系统. 然后再理解一些专有名词: Kafka 专用术语 Broker:Kafka 集群 ...

  8. 【渗透测试学习平台】 web for pentester -4.目录遍历

    Example 1 http://192.168.106.154/dirtrav/example1.php?file=../../../../../../../etc/passwd Example 2 ...

  9. JAVA中替换字符的方法replace和replaceAll 区别

    replace和replaceAll是JAVA中常用的替换字符的方法,它们的区别是:1)replace的参数是char和CharSequence,即可以支持字符的替换,也支持字符串的替换(CharSe ...

  10. poj_2553 强连通分支&出度为0的点

    题目大意 N个点的有向图中,定义“好点”为: 从该点v出发可以到达的所有点u,均有一条路径使得u可达v. 求出图中所有的“好点”,并按照顺序从小到大输出出来. 题目分析 图存在多个强连通分支,强连通分 ...