您的位置：首页 > Web前端 > JavaScript

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

2016-01-26 00:00 1076 查看
本文实例讲述了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+html5 canvas绘制缤纷多彩的三角形效果完整实例
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
JS绘制生成花瓣效果的方法
js绘制圆形和矩形的方法
javascript+html5实现绘制圆环的方法
js+html5实现canvas绘制圆形图案的方法
js+html5实现canvas绘制简单矩形的方法
js+html5实现canvas绘制镂空字体文本的方法
js+css绘制颜色动态变化的圈中圈效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航