Canvas学习:绘制线段

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

在上一篇介绍Canvas坐标系统的结尾处,我们使用了Canvavs绘制了一个网格。整个效果是由直线和文本构成。在这一节中,我们来看看如何使用Canvas绘制线段。

在Canvas中,线段也是路径中的一种,被称之为线性路径。在Canvas中绘制线性路径主要用到moveTo(x,y)lineTo(x,y)stroke()几个方法。

先画一条简单的直线

Canvas画一下直线非常的容易。众所周之,两点就能构成一条直线。使用两个API就可以:moveTo()告诉你把画笔移到Canvas画布中的某个位置(直线的起点),然后通过lineTo()把画笔移到另一个点。从而两个点构成一条直线。

function drawScreen () {
    ctx.moveTo(50, 10);
    ctx.lineTo(350, 100);
}

但这样在画布看不到任何的线条。如果需要看到效果,还需要使用stroke()方法:

function drawScreen () {
    ctx.moveTo(50, 10);
    ctx.lineTo(350, 100);
    ctx.stroke();
}

是不是很简单,通过这三个方法就可以绘制出一条线段。

  • moveTo(x,y):移动画笔到指定的坐标点(x,y),该点就是新的子路径的起始点。该方法并不会从当前路径中清除任何子路径
  • lineTo(x,y):使用直线连接当前端点和指定的坐标点(x,y)
  • stroke():沿着绘制路径的坐标点顺序绘制直线

改变线段宽度

我们在实际绘制线段时,总是有粗细的情况发生。那么在Canvas中可以通过lineWidth来改变绘制线段的粗细。比如:

function drawScreen () {
    ctx.lineWidth = 10; // 改变线的粗细
    ctx.moveTo(50, 10); // 起始点
    ctx.lineTo(350, 100); // 第二点(如果是一条直线的话,就是终点)
    ctx.stroke();
}

lineWidth主要用来定义绘制线条的宽度。默认值是1.0,并且这个属性必须大于0.0。较宽的线条在路径上居中,每边各有线条宽的一半。

改变线段的颜色

既然能改为线段的粗细,那必然能改变线段的颜色。在Canvas中可以通过strokeStyle来改变线段的颜色:

function drawScreen () {
    ctx.lineWidth = 10;
    ctx.strokeStyle = '#f36';
    ctx.moveTo(50, 10);
    ctx.lineTo(350, 100);
    ctx.stroke();
}

strokeStyle主要用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象。

也就是说,我们也可以绘制渐变色的线段:

function drawScreen () {
    // 创建一个表示线性颜色渐变的CanvasGradient对象,
    // 并设置该对象的作用区域就是线段所在的区域
    var canvasGradient = ctx.createLinearGradient(50, 50, 250, 50);
    //在offset为0的位置(即起点位置)添加一个蓝色的渐变
    canvasGradient.addColorStop(0, "blue");
    //在offset为0.2的位置(线段左起20%的位置)添加一个绿色的渐变
    canvasGradient.addColorStop(0.2, "green");
    //在offset为0的位置(即终点位置)添加一个红色的渐变
    canvasGradient.addColorStop(1, "red");
    //将strokeStyle的属性值设为该CanvasGradient对象
    ctx.strokeStyle = canvasGradient;
    ctx.lineWidth = 10;
    ctx.moveTo(50, 10);
    ctx.lineTo(350, 100);
    ctx.str
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/canvas/draw-lines.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部