html5canvas绘制渐变图形,HTML5 Canvas渐变图形绘制[线性、径向]

让大家久等了，我们的渐变课程终于上演了，谢谢关注。

依照惯例，

如果您学习过之前的，你会觉得很亲切的，因为在html5里他们的名称是一样的。

我们一起来看代码注释讲解

线性渐变语法

createLinearGradient(xStart,yStart,xEnd,yEnd);

渐变起点横坐标：xStart，纵坐标：yStart；

渐变终点横坐标：xEnd，纵坐标：yEnd；

来给渐变加入至少2个的Stop点吧

addColorStop(offset,color)

offset为0到1的浮点值，来定义渐变偏移量

color可支持16进制、rgb、rgba颜色

径向渐变语法

CreateRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);

开始圆心横坐标：xStart，纵坐标：yStart，半径：radiusStart；

结束圆心横坐标：xEnd，纵坐标：yEnd，半径：radiusEnd；

addColorStop(offset,color)

offset为0到1的浮点值，来定义渐变偏移量

color可支持16进制、rgb、rgba颜色

[javascript]

//得到画布上下文，上节已讲，在此不多说

var wh = document.getElementById("canvas");

function draw() {

canvas = document.getElementById("canvas");

if (canvas.getContext) { //检测浏览器是否兼容

ctx = canvas.getContext("2d"); //你的canvas代码在这里

return ctx;

}

return null;

}

/*我们用这个方法来创建线性渐变

createLinearGradient(xStart,yStart,xEnd,yEnd);

渐变起点横坐标：xStart，纵坐标：yStart；

渐变终点横坐标：xEnd，纵坐标：yEnd；

来给渐变加入至少2个的Stop点吧

addColorStop(offset,color)

offset为0到1的浮点值，来定义渐变偏移量

color可支持16进制、rgb、rgba颜色

*/

function CreateLinearGradient() {

var canvas = draw();

var grd = canvas.createLinearGradient(0, 0, 175, 50);

//支持这么多种的颜色定义方式

grd.addColorStop(0, "#9CAAC1");

grd.addColorStop(0.3, "black");

grd.addColorStop(0.6, "rgb(255,255,0)");

grd.addColorStop(1, 'rgba(255,0,0,0.3)');

canvas.fillStyle = grd;

canvas.fillRect(0, 0, 275, 50);

}

/*再来一个径向渐变吧

CreateRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);

开始圆心横坐标：xStart，纵坐标：yStart，半径：radiusStart；

结束圆心横坐标：xEnd，纵坐标：yEnd，半径：radiusEnd；

addColorStop(offset,color)

offset为0到1的浮点值，来定义渐变偏移量

color可支持16进制、rgb、rgba颜色

*/

function CreateRadialGradient() {

var canvas = draw();

canvas.strokeStyle = "blue";

canvas.lineWidth = 2;

canvas.beginPath();

var grd = canvas.createRadialGradient(120, 220, 0, 120, 220, 90);

grd.addColorStop(0, "#9CAAC1");

grd.addColorStop(0.3, "black");

grd.addColorStop(0.6, "rgb(255,255,0)");

grd.addColorStop(1, 'rgba(255,0,0,0.3)');

canvas.fillStyle = grd;

//arc(x,y,radius[半径],startAngle[开始弧度],endAngle[结束弧度],anticlockwise[true顺时针绘制,false逆时针绘制])

canvas.arc(120, 220, 100, 0, 2 * Math.PI, true);

canvas.closePath();

canvas.stroke();

canvas.fill();

}

/*最后看一个基本方法，擦除

clearRect(x,y,width,heigth);要擦除以x，y坐标为起点，width,heigth为长宽的矩形区域里的内容

*/

function Ca() {

var canvas = draw();

canvas.clearRect(0, 0, wh.width, wh.height);

}