当前位置：首页 > 资讯 > 技术文档

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

时间：2021-02-16 05:04 编辑：来源：阅读：
扫一扫，手机访问

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

本文实例讲述了JavaScript+html5 canvas绘制渐变区域的方法。分享给大家供大家参考，具体如下：运行效果截图如下： [img]http://files.jb51.net/file_images/article/201601/2016126115643897.jpg?201602611570[/img] 具体代码如下：

<!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特效相关内容感兴趣的读者可查看本站专题：《[url=http://www.1sucai.cn/Special/104.htm]jQuery动画与特效用法总结[/url]》及《[url=http://www.1sucai.cn/Special/430.htm]jQuery常见经典特效汇总[/url]》希望本文所述对大家JavaScript程序设计有所帮助。

全部评论(0)

上一篇：js点击弹出div层实现可拖曳的弹窗效果
下一篇：JavaScript实现的背景自动变色代码

资讯排行榜
更多>>