在js中，使用canvas绘制渐变色线条

效果

代码

注：看注释

     var colors = ['#6bfae1' ,'#63b9e9' ,'red' ,'yellow' ,'blue', 'green'];var ctx = canvas.getContext('2d');ctx.moveTo(50, 300);ctx.lineTo(700, 300);ctx.lineTo(750, 200);ctx.lineTo(780, 150);//  ...若干个坐标var line = ctx.createLinearGradient(50, 300, 780, 150); //线性渐变的范围//  参数一，偏移量取值范围 0-1//  参数二，颜色值for (var i=0; i<colors.length; i++) {line.addColorStop(i / colors.length, colors[i]);}ctx.lineWidth = 8;ctx.strokeStyle = line;ctx.stroke();

附加：加上阴影

     ctx.shadowBlur = 20;  //  阴影等级ctx.shadowOffsetX = "0";  //  阴影位置默认(0, 0)ctx.shadowOffsetY = "0";ctx.shadowColor = "#fff";  //  阴影的颜色

结尾处，欢迎交流学习，纠错。

在js中，使用canvas绘制渐变色线条相关推荐

用html语言编写笑脸,怎么使用HTML5中的Canvas绘制笑脸
怎么使用HTML5中的Canvas绘制笑脸发布时间:2021-02-26 09:33:14 来源:亿速云阅读:75 作者:清风这篇"怎么使用HTML5中的Canvas绘制笑脸" ...
php代码输出笑脸,利用HTML5中的Canvas绘制笑脸的代码
这篇文章主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是HTML5中的基本功能,需要的朋友可以参考下今天,你将学习一项称为Canvas(画布)的web技术,以及 ...
Canvas绘制基本线条的方式
Canvas绘制基本线条的方式什么是Canvas - Canvas,顾名思义,是一块"画布",Canvas有着默认的宽(300px).高(150px); <canvas i ...
VC++ 利用MFC的CWindowDC类实现画线功能在桌面窗口中画线绘制彩色线条 CPen nPenStyle nWidth crColor
目录利用MFC的CWindowDC类实现画线功能在桌面窗口中画线绘制彩色线条 CPen nPenStyle nWidth crColor 接上:VC++ 绘制线条 OnLButtonDown函数 ...
使用HTML5中的canvas绘制灰太狼图像
大家好,我是byoneself,本次将为大家分享一下使用HTML5中的canvas绘制一个灰太狼图像,希望对大家有所帮助. 下图是效果图: 以下就是实现的代码: <!DOCTYPE html&g ...
在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
html+js：画布canvas + 绘制简单矩形
html5支持canvas标签 canvas创建一个画布,通过.getContext方法创建一个CanvasRenderingContext2D对象进行图案的绘制,具体的方法可以前往HTML Canv ...
html 绘制矩形,HTML5中使用canvas绘制矩形
canvas是HTML5中新增的一个元素,使用Canvas可以绘制任何你喜欢的图形.先来认识什么是Canvas? 1.在页面上放置一个canvas元素,就相当于在页面上放置了一块"画布&qu ...
canvas绘制不规则线条，类似画板的画笔，基于zrender
本文介绍绘制类似画板中画笔功能的线条 zrender实现简易画板功能可绘制大部分常用图形在文章末尾可参考多数情况下绘制线条首先想到的是用Line绘制,当然1或2像素的细线没什么问题当线条变宽就有意 ...

在js中，使用canvas绘制渐变色线条

效果

代码

附加：加上阴影

在js中，使用canvas绘制渐变色线条相关推荐

最新文章

热门文章