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> ...
随机推荐
- Unity3d导出安卓版本
1. 要想导出安卓版,就必须要安装安卓 SDK,这个可以去这里下载. http://developer.android.com/sdk/index.html. 当我们打开后就是看见这个了. 2.当我 ...
- phpcms二级栏目的调用
1.二级栏目的调用方法 {php $data = subcat($module, $catid);} {loop $data $n $r} {if $r[ismenu]} {$r[catname]} ...
- css两列等高布局
布局方案 等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法.首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个 ...
- HTML之DocType的几种类型
一.什么是DOCTYPE DOCTYPE是Document Type(文档类型)的简写,在页面中,用来指定页面所使用的XHTML(或者HTML)的版本.要想制作符合标准的页面,一个必不可少的关键组成部 ...
- input 监听输入事件
$("#" + inputId).on("input", function () { var checkboxId = $("#" + in ...
- swift - 利用UIDatePicker实现定时器的效果
效果图如下: 可以通过UIDatePicker调整倒计时的时间,然后点击UIButton开始倒计时,使用NSTimer进行倒计时的时间展示,我是声明了一个label也进行了标记, 然后点击按钮开始倒计 ...
- div位置设置
div居中显示 margin:0 auto div中的内容居中显示 text-algin:center div靠右显示 float:right 设置div元素的右外边距 margin-right:10 ...
- MySQL性能优化(四)-- MySQL explain详解
前言 MySQL中的explain命令显示了mysql如何使用索引来处理select语句以及连接表.explain显示的信息可以帮助选择更好的索引和写出更优化的查询语句. 一.格式 explain + ...
- 批量执行命令:fabric
Fabric 可以通过 SSH 在多台客户端主机上批量执行任务,是基于 paramiko 封装开发的,paramiko 更底层一些,安装方法如下: [root@localhost ~]$ yum in ...
- ubuntu 安装nfs 服务
1. 安装nfs服务软件 (1)服务器端 $sudo apt-get install nfs-kernel-server rpcbind (2)客户端 (可以省略) $sudo apt-get in ...