html5(canvas)画图(3)_H5之家 - 中国HTML5教程资源分享第一站

下面给出两个实验:

function draw26(id) { ////同一个圆心画球型 /*var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext('2d'); var g1 = context.createRadialGradient(200, 150, 0, 200, 150, 100); g1.addColorStop(0.1, 'rgb(255,0,0)'); g1.addColorStop(1, 'rgb(50,0,0)'); context.fillStyle = g1; context.beginPath(); context.arc(200, 150, 100, 0, Math.PI * 2, true); context.closePath(); context.fill();*/ //不同圆心看径向渐变模型 var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext('2d'); var g1 = context.createRadialGradient(100, 150, 10, 300, 150, 50); g1.addColorStop(0.1, 'rgb(255,0,0)'); g1.addColorStop(0.5, 'rgb(0,255,0)'); g1.addColorStop(1, 'rgb(0,0,255)'); context.fillStyle = g1; context.fillRect(0, 0, 400, 300); }

同一个圆心画球形

不同圆心径向渐变

图形变形

1、平移context.translate(x,y)

x:坐标原点向x轴方向平移x y:坐标原点向y轴方向平移y

2、缩放context.scale(x,y)

x:x坐标轴按x比例缩放 y:y坐标轴按y比例缩放

3、旋转context.rotate(angle)

angle:坐标轴旋转x角度（角度变化模型和画圆的模型一样） function draw5(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.save(); //保存了当前context的状态 context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); context.fillStyle = "rgba(255,0,0,0.1)"; //平移缩放旋转 1 2 3 context.translate(100, 100); context.scale(0.5, 0.5); context.rotate(Math.PI / 4); context.fillRect(0, 0, 100, 100); context.restore(); //恢复到刚刚保存的状态,保存恢复只能使用一次 context.save(); //保存了当前context的状态 context.fillStyle = "rgba(255,0,0,0.2)"; //平移旋转缩放 1 3 2 context.translate(100, 100); context.rotate(Math.PI / 4); context.scale(0.5, 0.5); context.fillRect(0, 0, 100, 100); context.restore(); //恢复到刚刚保存的状态 context.save(); //保存了当前context的状态 context.fillStyle = "rgba(255,0,0,0.3)"; //缩放平移旋转 2 1 3 context.scale(0.5, 0.5); context.translate(100, 100); context.rotate(Math.PI / 4); context.fillRect(0, 0, 100, 100); context.restore(); //恢复到刚刚保存的状态 context.save(); //保存了当前context的状态 context.fillStyle = "rgba(255,0,0,0.4)"; //缩放旋转平移 2 3 1 context.scale(0.5, 0.5); context.rotate(Math.PI / 4); context.translate(100, 100); context.fillRect(0, 0, 100, 100); context.restore(); //恢复到刚刚保存的状态 context.save(); //保存了当前context的状态 context.fillStyle = "rgba(255,0,0,0.5)"; //旋转平移缩放 3 1 2 context.rotate(Math.PI / 4); context.translate(100, 100); context.scale(0.5, 0.5); context.fillRect(0, 0, 100, 100); context.restore(); //恢复到刚刚保存的状态 context.save(); //保存了当前context的状态 context.fillStyle = "rgba(255,0,0,1)"; //旋转缩放平移 3 2 1 context.rotate(Math.PI / 4); context.scale(0.5, 0.5); context.translate(100, 100); context.fillRect(0, 0, 100, 100); //实验表明应该移动的是坐标轴 //实验表明缩放的是坐标轴比例 //实验表明旋转的是坐标轴 //综合上述，因此平移缩放旋转三者的顺序不同都将画出不同的结果 }

由于(平移，缩放，旋转)和(平移，旋转，缩放)一样

(缩放，旋转，平移)和(旋转，缩放，平移)一样

所以实验结果只能看到4种情况，其实是有两种情况被覆盖了

运行结果

下面给出平移，缩放，旋转先后顺序不同，坐标轴的变化图

坐标轴变化图

图形组合
context.globalCompositeOperation=type

图形组合就是两个图形相互叠加了图形的表现形式,是后画的覆盖掉先画的呢，还是相互重叠的部分不显示等等，至于怎么显示就取决于type的值了

type： source-over（默认值）:在原有图形上绘制新图形 destination-over:在原有图形下绘制新图形 source-in:显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色 destination-in:显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色 source-out:只显示新图形非交集部分 destination-out:只显示原有图形非交集部分 source-atop:显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色 destination-atop:显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色 lighter:原有图形和新图形都显示，交集部分做颜色叠加 xor:重叠部分不显示 copy:只显示新图形文字看得人眼花缭乱，特意画图一张：回头一看惊觉打错字，图片的原型为圆形，你懂的~~

type类型