JavaScript+html5 canvas绘制渐变区域完整实例

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

具体代码如下：

<！DOCTYPE html><html> <head><title>demo</title><style type="text/css"> #canvas {border:3px solid gray; }</style> </head> <body><canvas id="canvas" width="500px" height="500px"></canvas> </body> <script type="text/javascript">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（）; </script></html>

更多关于js特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》
希望本文所述对大家JavaScript程序设计有所帮助。