HTML5-Canvas 图形变换+状态保存
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 图形变换+状态保存的更多相关文章
- HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...
- HTML5之图形变换
- Transformations scale(0.5,0.5) 缩放 rotate(0.175) 旋转 translate(100,50) 位移 - 代码结构 context.scale(x, y) ...
- HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 图形变换矩阵 ) transform, setTransform
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Canvas 总结,到第4章 canvas图形变换
canvas 必须认识到的大坑 <!-- 重点: 在js/canvas标签中定义的宽和高是画布实际的宽和高. 在样式表中定义的宽和高是画布缩放后的宽和高. 即:把js/canvas实际大小缩放到 ...
- html5 canvas缩放变换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 图形的阴影 ) shadowColor, shadowOffsetX, shadowOffsetY, shadowNlur
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Git高级操作
本文是在Git操作指南基础上衍生出来的高级操作,如果你对git不是很熟悉,建议你先阅读Git操作指南. 一.忽略提交特定文件 如果你不想让一些文件上传到git仓库中,可以让Git忽略特定文件或是目录, ...
- POJ 1426 Find The Multiple(背包方案统计)
Description Given a positive integer n, write a program to find out a nonzero multiple m of n whose ...
- 设置jQuery validate插件错误提示位置
参照上一篇bootstrap布局注册表单 使用校验插件默认位置显示提示信息,发现错误提示信息换行了,由于增加了提示信息,表单显示高度也增加了,如下 默认提示信息位置代码为 将错误提示设置其显示在右边, ...
- Python 使用正则表达式匹配电话号码
一个电话号码,如果区号为3位,那么区号后面的数字为8位:如果区号为4位,那么区号后面的数字为7位 In [1]: import re In [2]: number = "020-232432 ...
- http协议详解-摘抄
引言 HTTP 是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和 扩展.目前在WWW中使用的是HTTP/ ...
- Mybatis中的foreach
<delete id="deleteByParam"> DELETE FROM YZ_SECURITIES_CURRENCY WHERE ID IN <forea ...
- eclipse的.properties文件中文显示问题
eclipse的.properties文件,默认的编码方式是iso-8859-1. 所以中文显示有问题. 按照下面的方式,把Default Encoding修改成UTF-8就可以了.
- Ubuntu14.04下安装DevStack
虚拟机中的网络配置 NET8 为nat net2 为host-only 虚拟机网络配置 # The primary network interface vmnet nat type auto eth0 ...
- centos7上开启单用户模式
author: headsen chen date : 2018-08-02 11:23:16 1,在出现centos7的页面的时候,按 e进入到编译内核的界面 2,找到下面的这一段,将ro 该车 ...
- 三、微信小游戏开发 --- 小游戏API调用Platform
微信小游戏API Platform主要是Egret用于来调用平台的SDK的. 在Egret中使用接口定义Platform. Egret项目中默认的platform值是DebugPlatform. 发布 ...