html canvas颜色渐变色 HTML5-画布（canvas）效果之-渐变色

渐变色

您的浏览器不支持 canvas遇新是直朋能到 标签

Demo

清除画布

clearIt();/** context.createLinearGradient(xStart, yStart, xEnd, yEnd) - 创建线性渐变对象，并返回 CanvasGradient 类型的对象

* xStart, yStart - 线性渐变对象的起始点坐标

* xEnd, yEnd - 线性渐变对象的结束点坐标

*

* CanvasGradient.addColorStop(offset, color) - 新增一个渐变参考点

* offset - 渐变参考点的位置，0.0 - 1.0 之间。起始点为 0，结束点为 1

* color - 渐变参考点的颜色值*/varlinearGradient=ctx.createLinearGradient(50,0,50,100);

linearGradient.addColorStop(0,"red");

linearGradient.addColorStop(0.5,"green");

linearGradient.addColorStop(1,"blue");

ctx.beginPath();

ctx.arc(50,50,50,0,2 *Math.PI,true);

ctx.fillStyle=linearGradient;

ctx.fill();/** context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) - 创建放射性渐变对象，并返回 CanvasGradient

* xStart, yStart - 放射性渐变对象的开始圆的圆心坐标

* radiusStart - 开始圆的半径

* xEnd, yEnd - 放射性渐变对象的结束圆的圆心坐标

* radiusEnd - 结束圆的半径*/varradialGradient=ctx.createRadialGradient(150,50,0,150,50,50);

radialGradient.addColorStop(0,"red");

radialGradient.addColorStop(0.5,"green");

radialGradient.addColorStop(1,"blue");

ctx.beginPath();

ctx.arc(150,50,50,0,2 *Math.PI,true);

ctx.fillStyle=radialGradient;

ctx.fill();

}functionclearIt() {

ctx.clearRect(0,0,200,100);

}