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

2019-11-20 10:41:27

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：JavaScript+html5 canvas制作的百花齐放效果完整实例

下一篇：Javascript中匿名函数的调用与写法实例详解(多种)