千呼万唤 HTML 5 (10) - 画布(canvas)之转换
来源:互联网 发布:软件安全性测试过程 编辑:程序博客网 时间:2024/06/06 08:36
原文地址:http://www.cnblogs.com/webabcd/archive/2012/02/22/2362505.html
作者:webabcd
介绍
HTML 5: 画布(canvas)之转换(转换画布的用户坐标系)
- 平移 | translate()
- 旋转 | rotate()
- 缩放 | scale()
- 矩阵转换 | transform(a, b, c, d, e, f)
- 矩阵转换 | setTransform(a, b, c, d, e, f)
示例
1、平移 | translate()
canvas/transform/translate.html
<!DOCTYPE HTML><html><head> <title>平移</title></head><body> <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)"> 您的浏览器不支持 canvas 标签 </canvas> <br /> <button type="button" onclick="drawIt();">不断地点我看 Demo</button> <button type="button" onclick="clearIt();">清除画布</button> <script type="text/javascript"> var ctx = document.getElementById('canvas').getContext('2d'); var canvasX = 0; var canvasY = 0; var stepX = 20; var stepY = 20; function drawIt() { if (canvasX == 0 && canvasY == 0) ctx.strokeRect(0, 0, 100, 100); canvasX += stepX; canvasY += stepY; /* * context.translate(x, y) - 将当前的用户坐标系平移指定的距离 * x - x 轴方向上需要平移的像素数 * y - y 轴方向上需要平移的像素数 */ ctx.strokeStyle = "blue"; ctx.translate(stepX, stepY); ctx.strokeRect(0, 0, 100, 100); } function clearIt() { ctx.translate(-canvasX, -canvasY); canvasX = 0; canvasY = 0; ctx.strokeStyle = "black"; ctx.clearRect(0, 0, 400, 400); } </script></body></html>
2、旋转 | rotate()
canvas/transform/rotate.html
<!DOCTYPE HTML><html><head> <title>旋转</title></head><body> <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)"> 您的浏览器不支持 canvas 标签 </canvas> <br /> <button type="button" onclick="drawIt();">不断地点我看 Demo</button> <button type="button" onclick="clearIt();">清除画布</button> <script type="text/javascript"> var ctx = document.getElementById('canvas').getContext('2d'); var canvasRadian = 0; var stepRadian = 15 * Math.PI / 180; function drawIt() { if (canvasRadian == 0) ctx.strokeRect(360, 0, 20, 60); canvasRadian += stepRadian; /* * context.rotate(radian) - 将当前的用户坐标系旋转指定的弧度,顺时针为正值,逆时针为负值 * radian - 弧度值 */ ctx.strokeStyle = "blue"; ctx.rotate(stepRadian); ctx.strokeRect(360, 0, 20, 60); } function clearIt() { ctx.rotate(-canvasRadian); canvasRadian = 0; ctx.strokeStyle = "black"; ctx.clearRect(0, 0, 400, 400); } </script></body></html>
3、缩放 | scale()
canvas/transform/scale.html
<!DOCTYPE HTML><html><head> <title>缩放</title></head><body> <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)"> 您的浏览器不支持 canvas 标签 </canvas> <br /> <button type="button" onclick="drawIt();">不断地点我看 Demo</button> <button type="button" onclick="clearIt();">清除画布</button> <script type="text/javascript"> var ctx = document.getElementById('canvas').getContext('2d'); var canvasScaleX = 1; var canvasScaleY = 1; var stepScaleX = 1.1; var stepScaleY = 1.1; function drawIt() { if (canvasScaleX == 1 && canvasScaleY == 1) ctx.strokeRect(0, 0, 60, 60); canvasScaleX *= stepScaleX; canvasScaleY *= stepScaleY; /* * context.scale(x, y) - 将当前的用户坐标系缩放指定的倍数 * x - 水平方向上的缩放倍数 * y - 垂直方向上的缩放倍数 */ ctx.strokeStyle = "blue"; ctx.scale(stepScaleX, stepScaleY); ctx.strokeRect(0, 0, 60, 60); } function clearIt() { ctx.scale(1 / canvasScaleX, 1 / canvasScaleY); canvasScaleX = 1; canvasScaleY = 1; ctx.strokeStyle = "black"; ctx.clearRect(0, 0, 400, 400); } </script></body></html>
4、矩阵转换 | transform(a, b, c, d, e, f)
canvas/transform/transform.html
<!DOCTYPE HTML><html><head> <title>矩阵转换 | transform(a, b, c, d, e, f)</title></head><body> <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)"> 您的浏览器不支持 canvas 标签 </canvas> <br /> <button type="button" onclick="drawIt();">不断地点我看 Demo</button> <button type="button" onclick="clearIt();">清除画布</button> <script type="text/javascript"> var ctx = document.getElementById('canvas').getContext('2d'); var canvasScaleX = 1; var canvasScaleY = 1; var stepScaleX = 1.1; var stepScaleY = 1.1; function drawIt() { if (canvasScaleX == 1 && canvasScaleY == 1) ctx.strokeRect(0, 0, 60, 60); canvasScaleX *= stepScaleX; canvasScaleY *= stepScaleY; /* * context.transform(a, b, c, d, e, f) - 按指定的矩阵转换当前的用户坐标系 * 相当于:context.transform(M11, M12, M21, M22, OffsetX, OffsetY) * * 关于仿射矩阵参考:http://www.cnblogs.com/webabcd/archive/2008/11/03/1325150.html * * |X| |M11(默认值 1) M21(默认值 0) 0| * |Y| = |x y 1| * |M12(默认值 0) M22(默认值 1) 0| * |1| |OffsetX(默认值 0) OffsetY(默认值 0) 1| * * X = x * M11 + y * M12 + OffsetX * Y = x * M21 + y * M22 + OffsetY */ ctx.strokeStyle = "blue"; ctx.transform(stepScaleX, 0, 0, stepScaleY, 0, 0); ctx.strokeRect(0, 0, 60, 60); } function clearIt() { ctx.transform(1 / canvasScaleX, 0, 0, 1 / canvasScaleY, 0, 0); canvasScaleX = 1; canvasScaleY = 1; ctx.strokeStyle = "black"; ctx.clearRect(0, 0, 400, 400); } </script></body></html>
5、矩阵转换 | setTransform(a, b, c, d, e, f)
canvas/transform/setTransform.html
<!DOCTYPE HTML><html><head> <title>矩阵转换 | setTransform(a, b, c, d, e, f)</title></head><body> <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)"> 您的浏览器不支持 canvas 标签 </canvas> <br /> <button type="button" onclick="drawIt();">Demo</button> <button type="button" onclick="clearIt();">清除画布</button> <script type="text/javascript"> var ctx = document.getElementById('canvas').getContext('2d'); function drawIt() { ctx.strokeStyle = "red"; ctx.scale(2, 2); ctx.strokeRect(0, 0, 60, 60); /* * context.setTransform(a, b, c, d, e, f) - 首先重置用户坐标系,然后再按指定的矩阵转换用户坐标系(translate, rotate, scale, transform 是针对当前用户坐标系做转换,而 setTransform 是针对重置后的用户坐标系做转换) * 相当于:context.setTransform(M11, M12, M21, M22, OffsetX, OffsetY) * * 关于仿射矩阵参考:http://www.cnblogs.com/webabcd/archive/2008/11/03/1325150.html * * |X| |M11(默认值 1) M21(默认值 0) 0| * |Y| = |x y 1| * |M12(默认值 0) M22(默认值 1) 0| * |1| |OffsetX(默认值 0) OffsetY(默认值 0) 1| * * X = x * M11 + y * M12 + OffsetX * Y = x * M21 + y * M22 + OffsetY */ ctx.strokeStyle = "blue"; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.strokeRect(0, 0, 60, 60); } function clearIt() { ctx.clearRect(0, 0, 400, 400); } </script></body></html>
OK
[源码下载]
- 千呼万唤 HTML 5 (10) - 画布(canvas)之转换
- 千呼万唤 HTML 5 (8) - 画布(canvas)之绘制图形
- 千呼万唤 HTML 5 (9) - 画布(canvas)之承载媒体
- 千呼万唤 HTML 5 (11) - 画布(canvas)之效果
- UGUI之Canvas(画布)
- HTML canvas画布
- 千呼万唤 HTML 5 (6) - 表单元素之 input 元素
- HTML5之画布(canvas)(一)
- HTML5之画布(canvas)(二)
- SWT(JFace)体验之Canvas(画布)
- SWT(JFace)体验之Canvas(画布)
- QML之Canvas(画布元素)
- Canvas之画布操作
- HTML5之画布Canvas
- JavaScript之Canvas画布
- Canvas之画布操作
- canvas 之旋转画布
- Canvas类(画布)
- AJAX实现三级联动
- 千呼万唤 HTML 5 (9) - 画布(canvas)之承载媒体
- 最快速度找到内存泄漏
- Random.nextInt()
- 【转】C链表写入文件,读出文件操作
- 千呼万唤 HTML 5 (10) - 画布(canvas)之转换
- struts多文件上传的实现描述附带代码
- ie与火狐兼容问题(二)
- Led灯控制代码
- JS event 兼容 IE和FireFox
- 常指针与指针常量 (转载)
- tomcat环境变量配置
- 千呼万唤 HTML 5 (11) - 画布(canvas)之效果
- struts2自定义拦截器实现的分析说明附带代码