玩转html5canvas画图(5)

时间：2018-11-26

1 function draw25(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) 4 return false; 5 var context = canvas.getContext('2d'); 6 var g1 = context.createLinearGradient(0, 0, 0, 300); 7 8 g1.addColorStop(0, 'rgb(255,0,0)'); //红 9 g1.addColorStop(0.5, 'rgb(0,255,0)');//绿 10 g1.addColorStop(1, 'rgb(0,0,255)'); //蓝 11 12 //可以把lg对象理解成GDI中线性brush 13 context.fillStyle = g1; 14 //再用这个brush来画正方形 15 context.fillRect(0, 0, 400, 300); 16 }

织梦好，好织梦

织梦内容管理系统

玩转html5canvas画图本文来自织梦

本文来自织梦

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

径向渐变（发散）颜色rg.addColorStop(offset,color) 织梦内容管理系统

xStart:发散开始圆心x坐标

本文来自织梦

yStart:发散开始圆心y坐标内容来自dedecms

radiusStart:发散开始圆的半径织梦好，好织梦

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

dedecms.com

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

radiusEnd:发散结束圆的半径

内容来自dedecms

dedecms.com

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

color:绘制时要使用的颜色

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

玩转html5canvas画图

织梦内容管理系统

本文来自织梦

下面给出两个实验织梦好，好织梦

玩转html5canvas画图

内容来自dedecms

玩转html5canvas画图织梦内容管理系统

View Code

1 function draw26(id) { 2 //同一个圆心画球型 3 /*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(); 14 context.fill();*/ 15 16 //不同圆心看径向渐变模型 17 var canvas = document.getElementById(id); 18 if (canvas == null) 19 return false; 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 } 织梦好，好织梦