canvas 实现渐变色填充的三角形

  canvas 实现渐变色填充的三角形
 
  canvas实现
 
  1. 绘制三角形
 
  // html
 
  <canvas id=”triangle” width=”30″ height=”30″>
 
  Your browser does not support the canvas element.
 
  </canvas>
 
  // javascript
 
  var triangle: any = document.getElementById(”triangle”);
 
  var ctx = triangle.getContext(”2d”); // canvas 绘制区域
 
  ctx.beginPath(); // 开始绘制
 
  ctx.moveTo(0, 0); // 起点A(0,0)
 
  ctx.lineTo(30, 0); // 从起点A(0,0)绘制到B(30,0)
 
  ctx.lineTo(15, 16); // 从B(30,0)绘制到C(15,16)
 
  2. 设置渐变色并填充
 
  // javascript
 
  const grd1 = ctx.createLinearGradient(0, 0, 0, 16); // 渐变方向-Y轴
 
  grd1.addColorStop(0, “#FFFFFF”); //起始颜色
 
  grd1.addColorStop(1, “#CE070A80″); //终点颜色
 
  ctx.fillStyle = grd1; //以上面定义的渐变填充
 
  ctx.fill(); //闭合形状并且以填充方式绘制出来

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64717.shtml

张贴在3