JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="caibaojian" width="200" height="200">http://caibaojian.com/html5-canvas.html</canvas>

JavaScript

var bg = document.getElementById('caibaojian');
var ctx = bg.getContext('2d');
ctx.beginPath();
ctx.moveTo(100,10);
ctx.lineTo(10,180);
ctx.lineTo(190,180);
ctx.closePath();//闭合路径
ctx.lineWidth=10;//线的边框为10像素
//ctx.strokeStyle='#00ff00';
var grd = ctx.createLinearGradient(0,0,0,190); //从上到下
grd.addColorStop(0,"#4CE8B2"); //起始颜色
grd.addColorStop(1,"#EFD458"); //终点颜色
ctx.strokeStyle = grd;
ctx.stroke();