使用帆布怎么绘制线段 - 行业资讯 - 肥雀云

　　介绍

这篇文章给大家介绍使用帆布怎么绘制线段,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

<>强基础知识

画布的基础知识不算多,主要掌握如何绘制线段,图形,图片,文本等.canvas可以在浏览器中绘制,也可以借助node-canvas在节点服务端绘制简单的图片。本文只记录在浏览器中绘制,至于在节点端如何绘制,自己可以去查看相关资料。

在浏览器中绘制,就先在html中定义帆布元素,默认宽高是300 * 150,可以通过<代码> 宽度和高度<代码> 设置。注意帆布元素样式宽高和帆布绘图画布宽高不是一个东西,这块将在以后说的。

& lt; canvas id=癱anvas"比; 　　& lt;才能p>当前浏览器不支持画布,请升级浏览器& lt;/p> 　　& lt;/canvas>

在绘制之前,我们要先获取当画布前的2 d绘制上下文背景下,后续总是通过操作上下文来进行绘制。

let canvas =, document.querySelector(& # 39; #帆布# 39;); 　　if 画布(!),{ 　　throw 才能;new 错误(& # 39;还要not find canvas 元素# 39;); 　　}//,注意2 d。参数必须是小写的;//,通过设置参数为webgl,可以获取3 d绘制上下文　　let ctx =, canvas.getContext (& # 39; 2 d # 39;);

注:后续示例中会忽略上面的代码片段,直接使用<代码> ctx>

再来看看帆布2 d绘制中的坐标系统,当画布前元素左上角为坐标原点(0,0),水平向右为X轴正方向,垂直向下为Y轴正方向,如下图。可以通过平移(翻译),旋转(旋转),缩放(规模)来操作坐标系,实现一些动画,这部分将在动画知识部分详细讲解。

使用帆布怎么绘制线段

<强>线段

在绘制一条简单的线段时,一般会先设置线段的样式,比如,颜色,线条宽度、线条端点样式等,我们通过设置<代码> strokeStyle> ctx> rgba> ctx.strokeStyle =, & # 39;红色# 39;; 　　时间=ctx.lineWidth 10; 　　ctx.moveTo (10,, 10); 　　ctx.lineTo (50, 60); 　　ctx.stroke ();

使用帆布怎么绘制线段

先看看与绘制线段相关的方法以及属性,

相关方法:

<李>

beginPath,将当前路径之中的所有子路径都要清除掉,以此来重置当前路径。一般在绘制闭合图形时要先调用。

<李>

closePath,显示的封闭某段路径。该方法用于封闭圆弧路径以及由曲线或线段所创建的开放路径。

<李>

函数,移动当前绘制点到指定的坐标。

<李>

画线,从上一个点绘制一条到指定坐标点的线段。

<李>

setLineDash,用来设置虚线的方法,参数是一个数组、表明绘制实线的长度,以及实线之间的间隙的长度。

试试用设置不同的<代码> lineCap> ctx.lineWidth =, 10; 　　时间=ctx.textAlign & # 39;中心# 39;; 　　let colors =,(& # 39;红色# 39;,,& # 39;绿色# 39;,,& # 39;蓝# 39;]; 　　let lineCaps =,(& # 39;屁股# 39;,,& # 39;轮# 39;,,& # 39;广场# 39;]; 　　for (let (指数,lc), of lineCaps.entries ()), { 　　ctx.strokeStyle 才能=,颜色(指数),,//设置线段的颜色　　时间=ctx.lineCap 才能;lc,,//,设置lineCap 　　ctx.beginPath才能();,//,清空当前路径　　ctx.moveTo才能(10,20,+,20,*,指数); 　　ctx.lineTo才能(50岁,20,+,20,*,指数); 　　ctx.stroke才能(); 　　ctx.fillText才能(lc, 80年,25岁,+,20,*,指数); 　　}