html5怎么设置中心渐变,JavaScript+html5 canvas绘制渐变区域完整实例

本文实例讲述了JavaScript+html5 canvas绘制渐变区域的方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

demo

#canvas {

border:3px solid gray;

}

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

var ctx = canvas.getContext("2d");

ctx.beginPath();

ctx.rect(0, 0, 200, 200);

ctx.closePath();

var gradient = ctx.createLinearGradient(0, 0, 200, 200);

gradient.addColorStop(0, "gray");

gradient.addColorStop(0.5, "red");

gradient.addColorStop(1, "blue");

ctx.fillStyle = gradient;

ctx.fill();

更多关于js特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》

希望本文所述对大家JavaScript程序设计有所帮助。