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

  • A+
所属分类:Web前端
摘要

效果一:效果二:【拓展】上述代码实现一个渐变色三角形,如果想要绘制多个渐变色三角形,就需要多次进行「1,2」操作。示例代码:


实现效果

效果一: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(); //闭合形状并且以填充方式绘制出来 

【拓展】上述代码实现一个渐变色三角形,如果想要绘制多个渐变色三角形,就需要多次进行「1,2」操作。示例代码:

点击查看代码
    var bg: any = document.getElementById("triangle");     var ctx = bg.getContext("2d");     ctx.beginPath();     ctx.moveTo(0, 10);     ctx.lineTo(30, 10);     ctx.lineTo(15, 26);     const grd2 = ctx.createLinearGradient(0, 10, 0, 26);     grd2.addColorStop(0, "#FFFFFF"); //起始颜色     grd2.addColorStop(1, "#CE070A80"); //终点颜色     ctx.fillStyle = grd2; //以上面定义的渐变填充     ctx.fill(); //闭合形状并且以填充方式绘制出来      //填充三角形(等边)     ctx.beginPath();     ctx.moveTo(0, 0);     ctx.lineTo(30, 0);     ctx.lineTo(15, 16);     const grd1 = ctx.createLinearGradient(0, 0, 0, 16);     grd1.addColorStop(0, "#FFFFFF"); //起始颜色     grd1.addColorStop(1, "#CE070A80"); //终点颜色     ctx.fillStyle = grd1; //以上面定义的渐变填充     ctx.fill(); //闭合形状并且以填充方式绘制出来 
  • css实现

1. 绘制渐变色的矩形

// html <div className="triangle"></div>  // css .triangle {   width: 30px;   height: 16px;   background-image: linear-gradient(#FFFFFF, #CE070A80); } 

2. 绘制两个和背景色同色的三角形

// css   .triangle:before {     position: absolute;     content: "";     width: 0;     height: 0;     border-right: 15px solid transparent;     border-bottom: 16px solid #FFFFFF;   }    .triangle:after {     position: absolute;     content: "";     right: 0; // 使绘制的三角形位于矩形右侧     width: 0;     height: 0;     border-left: 15px solid transparent;     border-bottom: 16px solid #FFFFFF;   } 

【缺点】这种方式不能实现效果二,对于效果一不允许背景色带有透明度,实现效果有一定的局限性。

总结

对于简单的效果,建议使用方法二,如果要实现较为复杂的效果,可以使用方法一或者直接用图片替代(这种方式最简单直接)