玩转html5canvas画图(6)
时间：2018-11-26
内容来自dedecms
View Code1 function draw5(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) 4 return false; 5 6 7 var context = canvas.getContext("2d"); 8 context.save(); //保存了当前context的状态 9 context.fillStyle = "#EEEEFF"; 10 context.fillRect(0, 0, 400, 300); 11 12 context.fillStyle = "rgba(255,0,0,0.1)"; 13 //平移 缩放 旋转 1 2 3 14 context.translate(100, 100); 15 context.scale(0.5, 0.5); 16 context.rotate(Math.PI / 4); 17 context.fillRect(0, 0, 100, 100); 18 19 20 context.restore(); //恢复到刚刚保存的状态,保存恢复只能使用一次 21 context.save(); //保存了当前context的状态 22 context.fillStyle = "rgba(255,0,0,0.2)"; 23 //平移 旋转 缩放 1 3 2 24 context.translate(100, 100); 25 context.rotate(Math.PI / 4); 26 context.scale(0.5, 0.5); 27 context.fillRect(0, 0, 100, 100); 28 29 context.restore(); //恢复到刚刚保存的状态 30 context.save(); //保存了当前context的状态 31 context.fillStyle = "rgba(255,0,0,0.3)"; 32 //缩放 平移 旋转 2 1 3 33 context.scale(0.5, 0.5); 34 context.translate(100, 100); 35 context.rotate(Math.PI / 4); 36 context.fillRect(0, 0, 100, 100); 37 38 context.restore(); //恢复到刚刚保存的状态 39 context.save(); //保存了当前context的状态 40 context.fillStyle = "rgba(255,0,0,0.4)"; 41 //缩放 旋转 平移 2 3 1 42 context.scale(0.5, 0.5); 43 context.rotate(Math.PI / 4); 44 context.translate(100, 100); 45 context.fillRect(0, 0, 100, 100); 46 47 context.restore(); //恢复到刚刚保存的状态 48 context.save(); //保存了当前context的状态 49 context.fillStyle = "rgba(255,0,0,0.5)"; 50 //旋转 平移 缩放 3 1 2 51 context.rotate(Math.PI / 4); 52 context.translate(100, 100); 53 context.scale(0.5, 0.5); 54 context.fillRect(0, 0, 100, 100); 55 56 context.restore(); //恢复到刚刚保存的状态 57 context.save(); //保存了当前context的状态 58 context.fillStyle = "rgba(255,0,0,1)"; 59 //旋转 缩放 平移 3 2 1 60 context.rotate(Math.PI / 4); 61 context.scale(0.5, 0.5); 62 context.translate(100, 100); 63 context.fillRect(0, 0, 100, 100); 64 65 //实验表明应该移动的是坐标轴 66 //实验表明缩放的是坐标轴比例 67 //实验表明旋转的是坐标轴 68 //综合上述，因此平移 缩放 旋转 三者的顺序不同都将画出不同的结果 69 }
本文来自织梦
由于（平移，缩放，旋转）和（平移，旋转，缩放）一样
织梦内容管理系统
（缩放，选装，平移）和（旋转，缩放，平移）一样 织梦内容管理系统
所以实验结果只能看到“4”中情况，其实是有两种情况被覆盖了 织梦内容管理系统
织梦内容管理系统
下面给出平移，缩放，旋转先后顺序不同，坐标轴的变化图
内容来自dedecms
矩阵变换 context.transform(m11,m12,m21,m22,dx,dy)
织梦好，好织梦
所谓的矩阵变换其实是context内实现平移，缩放，旋转的一种机制
内容来自dedecms
他的主要原理就是矩阵相乘 内容来自dedecms
额，要讲解这个可以另开一个篇幅，庆幸的是已经有人做了总结，可以参考下面这篇文章 本文来自织梦
我们需要了解的是
本文来自织梦
context.translate(x,y) 等同于context.transform (1,0,0,1,x,y)或context.transform(0,1,1,0.x,y) 本文来自织梦
context.scale(x,y)等同于context.transform(x,0,0,y,0,0)或context.transform (0,y,x,0, 0,0);
织梦内容管理系统
context.rotate(θ)等同于 织梦内容管理系统
context.transform(Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180), copyright dedecms
-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180)，0，0） 本文来自织梦
或 织梦好，好织梦
context.transform(-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180)， copyright dedecms
Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180), 0，0） copyright dedecms
copyright dedecms
织梦内容管理系统
图形组合 context.globalCompositeOperation=type
图形组合就是两个图形相互叠加了图形的表现形式,是后画的覆盖掉先画的呢，还是相互重叠的部分不显示等等，至于怎么显示就取决于type的值了
织梦好，好织梦
type： 本文来自织梦
source-over（默认值）:在原有图形上绘制新图形 copyright dedecms
destination-over:在原有图形下绘制新图形 织梦好，好织梦
source-in:显示原有图形和新图形的交集，新图形在上，，所以颜色为新图形的颜色
destination-in:显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色
织梦好，好织梦
source-out:只显示新图形非交集部分 dedecms.com
destination-out:只显示原有图形非交集部分
dedecms.com
source-atop:显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色 内容来自dedecms
destination-atop:显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色 dedecms.com
lighter:原有图形和新图形都显示，交集部分做颜色叠加
xor:重叠飞部分不现实
copy:只显示新图形 copyright dedecms
文字看得人眼花缭乱，特意画图一张：回头一看惊觉打错字，图片的原型为圆形，你懂的- - 内容来自dedecms
织梦内容管理系统
以下为实验代码
dedecms.com
上一篇：傲剑狂刀出招表（键盘出招表+秘籍） 下一篇：写作文必学的六大修辞手法详解