信鸽网

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

  作者：bea

本文实例讲述了JavaScript+html5 canvas绘制渐变区域的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： <!DOCTYPE html><html> <head> <title>demo</title> <style type="text/css"> #canvas { border:3px solid gray; } </sty

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




有用  |  无用

猜你喜欢

您可能感兴趣的文章: