前端实现渐变色填充的三角形

实现效果:

一、canvas实现

1、绘制三角形

// html
<canvas id="triangle" width="30" height="30">Your browser does not support the canvas element.
</canvas>// JavaScriptvar 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、设置渐变色并填充

// JavaScriptconst grd1 = ctx.createLinearGradient(0, 0, 0, 16); // 渐变方向-Y轴grd1.addColorStop(0, "#FFFFFF"); //起始颜色grd1.addColorStop(1, "#CE070A80"); //终点颜色ctx.fillStyle = grd1; //以上面定义的渐变填充ctx.fill(); //闭合形状并且以填充方式绘制出来

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

二、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;}

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

总结

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

学习更多技能

请点击下方公众号

前端实现渐变色填充的三角形相关推荐

前端使用canvas绘制立体三角形
前端绘制立体效果的三角形的demo 在移动端使用时,需要自适应屏幕.canvas上无法设置rem,所以在canvas外加一个父级元素设置为rem,再将canvas的宽高设置为100% 100%. 如果 ...
matlab fill 渐变,Matlab的渐变色填充（一）
最近需要使用Matlab来制作一些图表,部分图表使用颜色填充.网络资源好像对渐变色填充这件事都讲得语焉不详,或是比较复杂.所以决定自己写一点简化版的操作,让后续使用Matlab不多的朋友可以比较容 ...
Matlab的渐变色填充（一）
最近需要使用Matlab来制作一些图表,部分图表使用颜色填充.网络资源好像对渐变色填充这件事都讲得语焉不详,或是比较复杂.所以决定自己写一点简化版的操作,让后续使用Matlab不多的朋友可以比较容 ...
Matlab不规则区域渐变色填充及注意事项
来源机器人工作空间着色,实现形象的展示. matlab实现方法这里介绍两个实现着色的函数,patch, fill.这两个函数具体使用方法查看帮助. 我使用的是patch.官方帮助文档上有一个示例如 ...
百度前端笔试题 css3画三角形
昨天做了百度2015年前端研发笔试卷,总体感受是比较看重html和css功底,对JavaScript的考察反而更少一些,貌似阿里也是比较看重css这一块.其中有一道用css实现的布局问题,是在一个大矩 ...
蓝桥杯Web前端练习-----渐变色背景生成器
介绍相信做过前端开发的小伙伴们对渐变色在 UI 设计中的流行度一定不陌生,网页上也时常可以看到各类复杂的渐变色生成工具.使用原生的 CSS 变量加一些 JS 函数就能做出一个简单的渐变色背景生成器. ...
Web前端笔记-two.js画三角形及画tip含tip旋转
程序运行截图如下: 旋转下: 代码如下: import * as Two from "JS/two"; import * as $ from "JS/jquery&quo ...
前端 input 自动填充功能
一.前端代码测试:<input id="test" type="text"><link rel="stylesheet" ...
前端HTML渐变色的使用
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>渐变& ...

前端实现渐变色填充的三角形

一、canvas实现

二、css实现

总结

前端实现渐变色填充的三角形相关推荐

最新文章

热门文章