玩转html5canvas画图(4)_H5之家 - 中国HTML5教程资源分享第一站

1 function draw2(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { ; 5 } 6 var context = canvas.getContext("2d"); 7 context.fillStyle = "#EEEFF"; 8 context.fillRect(0, 0, 400, 300); 9 var n = 0; 10 var dx = 150; 11 var dy = 150; 12 var s = 100; 13 context.beginPath(); 14 context.globalCompositeOperation = 'and'; 15 context.fillStyle = 'rgb(100,255,100)'; 16 var x = Math.sin(0); 17 var y = Math.cos(0); 18 var dig = Math.PI / 15 * 11; 19 context.moveTo(dx, dy); 20 for (var i = 0; i < 30; i++) { 21 var x = Math.sin(i * dig); 22 var y = Math.cos(i * dig); 23 context.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s); 24 } 25 context.closePath(); 26 context.fill(); 27 context.stroke(); 28 }

关于贝塞尔曲线可以参考百度百科和这篇文章

线性渐变 var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)

线性渐变颜色lg.addColorStop(offset,color)

xstart:渐变开始点x坐标

ystart:渐变开始点y坐标

xEnd:渐变结束点x坐标

yEnd:渐变结束点y坐标

offset:设定的颜色离渐变结束点的偏移量(0~1)

color:绘制时要使用的颜色

给出书本偏移量的解析图，从图可以看出线性渐变可以是两种以上颜色的渐变

View Code

1 function draw25(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) ; 5 var context = canvas.getContext('2d'); 6 var g1 = context.createLinearGradient(0, 0, 0, 300); g1.addColorStop(0.5, 'rgb(0,255,0)');g1.addColorStop(1, 'rgb(0,0,255)'); context.fillStyle = g1; context.fillRect(0, 0, 400, 300); 16 }

径向渐变（发散）var rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)

径向渐变（发散）颜色rg.addColorStop(offset,color)

xStart:发散开始圆心x坐标

yStart:发散开始圆心y坐标

radiusStart:发散开始圆的半径

xEnd:发散结束圆心的x坐标

yEnd:发散结束圆心的y坐标

radiusEnd:发散结束圆的半径

offset:设定的颜色离渐变结束点的偏移量(0~1)

color:绘制时要使用的颜色

书本并没有给出发散偏移量的图，特地画了幅：

下面给出两个实验

View Code

1 function draw26(id) { var canvas = document.getElementById(id); 4 if (canvas == null) 5 return false; 6 var context = canvas.getContext('2d'); 7 var g1 = context.createRadialGradient(200, 150, 0, 200, 150, 100); 8 g1.addColorStop(0.1, 'rgb(255,0,0)'); 9 g1.addColorStop(1, 'rgb(50,0,0)'); 10 context.fillStyle = g1; 11 context.beginPath(); 12 context.arc(200, 150, 100, 0, Math.PI * 2, true); 13 context.closePath(); canvas = document.getElementById(id); 18 if (canvas == null) ; 20 var context = canvas.getContext('2d'); 21 var g1 = context.createRadialGradient(100, 150, 10, 300, 150, 50); 22 g1.addColorStop(0.1, 'rgb(255,0,0)'); 23 g1.addColorStop(0.5, 'rgb(0,255,0)'); 24 g1.addColorStop(1, 'rgb(0,0,255)'); 25 context.fillStyle = g1; 26 context.fillRect(0, 0, 400, 300); 27 28 }