六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

canvas画渐变线条

Admin | 2016-5-1 10:56:01 | ReadNums | 1868 | 标签 网页制作 | 打印本页
     

  canvas画渐变线条实在太容易,先定义好渐变填充之后,再应用到canvas,最后再利用canvas划线,问题就解决了。下面我们看实例。

  一、HTML控件

  <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

  二、JS代码

  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  //定义渐变
  var gradient=ctx.createLinearGradient(0,0,100,0);
  gradient.addColorStop("1","green");
  gradient.addColorStop("0.2","blue");
  gradient.addColorStop("0.2","red");

  //应用渐变
  ctx.strokeStyle=gradient;
  //画线
  ctx.lineWidth=5;
  ctx.moveTo(10,75);
  ctx.lineTo(280,75);
  ctx.stroke();

  最后,画出下面的渐变线。

画渐变线


问题未解决:在线咨询

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日