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);
}