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

运行效果截图如下：

具体代码如下：

！DOCTYPE html html标题演示/标题样式类型=' text/CSS ' # canvas { border :3 px纯灰色；}/style/head body canvas id=' canvas ' width=' 500 px ' height=' 500 px '/canvas/body script type=' text/JavaScript ' var canvas=document。getelementbyid(' canvas ')；var CTX=画布。get context(' 2d ')；CTX。begin path()；ctx.rect(0，0，200，200)；CTX。close path()；var梯度=CTX。createlinegradient(0，0，200，200)；gradient.addColorStop(0，"灰色");gradient.addColorStop(0.5，‘red’)；gradient.addColorStop(1，"蓝色");ctx.fillStyle=渐变；CTX。fill()；/script/html更多关于射流研究…特效相关内容感兴趣的读者可查看本站专题： 《jQuery动画与特效用法总结》 及《jQuery常见经典特效汇总》

希望本文所述对大家Java脚本语言程序设计有所帮助。