最近在canvas中实现了一个渐变色的文字。实现说明：创建渐变色后调用CanvasRenderingContext2D的颜色填充属性fillStylecreateLinearGradient()createRadialGradient()fillText()绘制渐变色的文字。效果展示：第一行：线性渐变，从左到右；第二行：线性渐变，从上到下；第三行：径向渐变，由外向内；第四行：径向渐变，由内向外；完整代码链接：转载自文章：JS中使用canvas绘制带渐变色的文字线性渐变实现代码如下，点击上方链接查看完整代码htmljs//Canvasletcanvas=document.getElementById('canvas');letctx=canvas.getContext('2d');//文本基线设置为“top”，方便定位文本时使用文本的左上角Positioning，//和属性actualBoundingBoxDescent//获取后面使用的文本的高度也需要这个设置来得到它正确。ctx.textBaseline="top"ctx.font="粗体40px'FiraSans'";//定义文本样式//提取文本的宽高，渐变范围由文本的宽高定义lettextMetrics=ctx.measureText("阳光懂文字");lettext_width=textMetrics.width;lettext_height=textMetrics.actualBoundingBoxDescent;//定义渐变的过渡色letcolors=["rgb(255,149,0)",//橙色"rgb(237,176,0)","rgb(204,204,0)","rgb(153,230,0)","rgb(4,255,0)",//绿色];/***得到一个线性渐变颜色*参数x0,y0,x1,y1是createLinearGradient使用的参数*参数textX,textY是文字绘制的位置*/functiongetLingrad(x0,y0,x1,y1,textX,textY){//根据绘制的文本位置需要的Offset(textX,textY)letgradient=ctx.createLinearGradient(x0+textX,y0+textY,x1+textX,y1+textY);colors.map((item,i)=>{//偏移值按照颜色个数平分。gradient.addColorStop(i/(colors.length-1),item);})returngradient;}//绘制文字，从左到右渐变lettextP={x:0,y:0};//绘制文字ctx.fillStyle=getLingrad(0,0,text_width,0,textP.x,文本P.y);ctx.fillText("阳光知文",textP.x,textP.y);
