canvas学习培训总结3之绘图相对路径

2021-02-22 23:15 jianzhan

Canvas制图自然环境中一些属于马上绘图图型方式,一些制图方式是根据相对路径的。

马上绘图图型方式唯一两个strokeRect(),fillRect(),尽管strokezText(),fillText()方式也是马上绘图的,可是文字不算是图型。

根据相对路径的绘图系统软件 

大多数数绘图系统软件,如:SVG(Scalable Verctor Graphics, 可放缩的矢量图型),Adobe Illustrator等,全是根据相对路径的,

应用这些绘图系统软件时,你必须先界定1个相对路径,随后再对其开展描边或填充,还可以描边加填充这样图型才可以显示信息出来。

Canvas中的3种绘图方法:

绘图1条直线

Canvas制图自然环境中,直线也是根据相对路径绘图的,称为线形相对路径,建立线形相对路径的方式:moveTO()与lineTo(),在建立相对路径以后启用stroke()方式,才可以在Canvas中画出直线出来。

这便是前面大家所说的根据相对路径的绘图方式,务必对其开展描边或填充;

一般两点连1线因而绘图直线十分简易,根据moveTO()特定线的起始点,根据lineTo()挪动到另外一个点。

function drawLine(){
    cxt.moveTo(50, 50);
    cxt.lineTo(100, 100);
}

但是这样大家在画布中是看看不到直线的,前面大家说到根据相对路径的绘图方式,务必要描边或填充。因此要想看到結果,大家务必还要应用stroke()方式。

因而大家把方式改动成下面这样就会绘图出1条直线

function drawLine(){
    cxt.moveTo(50, 50);
    cxt.lineTo(200, 200);
    cxt.stroke();
}

大家只应用lineTo()也是能在画布中绘图出直线的,大家把上面的编码改为以下面所示,实际效果也是1样的

function drawLine(){
    cxt.lineTo(50, 50);
    cxt.lineTo(200, 200);
    cxt.stroke();
}

总结下moveTo()与lineTo()的用法

  • moveTo(x,y): 将笔触挪动到特定的座标x和y上,向当今相对路径中提升1纸条相对路径,该方式不容易消除当今相对路径中的任何子相对路径。
  • lineTo(x,y): 绘图1条从当今部位到特定x和y部位的平行线,假如当今相对路径中沒有子相对路径,那末这个方式的个人行为与moveTo()1样。假如当今相对路径中存在子相对路径,此方式会将你所特定的这个点添加子相对路径中。

更改直线的款式

更改直线的宽度

function= 14;
    cxt.lineTo(50, 50);
    cxt.lineTo(200, 200);
    cxt.stroke();
}

更改直线的色调

function drawLine(){
    cxt.lineWidth = 14;
    cxt.strokeStyle = 'green';
    cxt.lineTo(50, 50);
    cxt.lineTo(200, 200);
    cxt.stroke();
}

 

大家还能够运用CanvasGradient目标或CanvasPattern目标给直线加上渐变色色或图案设计

function drawLine(){
    cxt.lineWidth = 14;
    var gradient = cxt.createLinearGradient(0, 0, canvas.width/2, canvas.height/2);
    gradient.addColorStop(0, 'blue');
    gradient.addColorStop(0.5, 'purple');
    gradient.addColorStop(1, 'yellow');
    cxt.strokeStyle = gradient;
    cxt.lineTo(50, 50);
    cxt.lineTo(200, 200);
    cxt.stroke();
}

 beginPath()与closePath()

从上面canvas中的3种绘图方法中大家能够看出,第2行的弧形相对路径是对外开放相对路径,最终1行的弧形是封闭式相对路径。那末封闭式的相对路径是如何完成的呢?

下面大家看来看canvas中相对路径绘图中两个较为关键的方式

  • beginPath(): 消除当今全部子相对路径,以此来重设当今相对路径,再次整体规划1条相对路径。
  • closePath(): 用于封闭式某段对外开放相对路径。并不是必须的,假如图型是早已闭合了的,即当今点为刚开始点,该涵数甚么也不做。

先绘图出1条折线

function drawLine(){
    cxt.strokeStyle = 'green';
    cxt.lineWidth = 2;
    cxt.moveTo(50, 50);
    cxt.lineTo(50, 150);
    cxt.lineTo(150, 150);
    cxt.stroke();
}

改动上面事例中的编码在编码中加上beginPath()与closePath()方式

function drawLine(){
    //描边3角形
    cxt.strokeStyle = 'green';
    cxt.lineWidth = 2;
    cxt.beginPath();
    cxt.moveTo(50, 50);
    cxt.lineTo(50, 150);
    cxt.stroke();
    cxt.beginPath();
    cxt.lineTo(150, 150);
    cxt.lineTo(150, 250);
    cxt.stroke();
  cxt.closePath();
}

能够看出大家在画布中绘图了两条相对路径

留意:启用beginPath()以后,或canvas刚建的情况下,第1条相对路径结构指令一般被视作是moveTo()。因此大家在绘图图型的情况下1定要先应用beginPath()。

大家再次改动大家的编码

function drawLine(){
    //描边3角形
    cxt.strokeStyle = 'green';
    cxt.lineWidth = 2;
    cxt.beginPath();
    cxt.moveTo(50, 50);
    cxt.lineTo(50, 150);
    cxt.lineTo(150, 150);
    cxt.closePath();
    cxt.stroke();
    //折线
    cxt.translate(150, 0);
    cxt.strokeStyle = 'red';
    cxt.lineWidth = 2;
    cxt.beginPath();
    cxt.moveTo(50, 50);
    cxt.lineTo(50, 150);
    cxt.lineTo(150, 150);
    cxt.stroke();
    cxt.closePath();
    //翠绿色填充3角形
    cxt.translate(150, 0);
    cxt.fillStyle = 'green';
    cxt.lineWidth = 2;
    cxt.beginPath();
    cxt.moveTo(50, 50);
    cxt.lineTo(50, 150);
    cxt.lineTo(150, 150);
    cxt.fill();
    cxt.closePath();
    //鲜红色填充3角形
    cxt.translate(150, 0);
    cxt.fillStyle = 'red';
    cxt.lineWidth = 2;
    cxt.beginPath();
    cxt.moveTo(50, 50);
    cxt.lineTo(50, 150);
    cxt.lineTo(150, 150);
    cxt.closePath();
    cxt.fill();
}

从上面的事例大家能够看出closePath()的部位不一样,也会危害大家的图型

留意:当你启用fill()涵数时,全部沒有闭合的样子都会全自动闭合,因此此时closePath()涵数并不是务必的。

可是启用stroke():假如你在stroke()方式以前只用closePath()会产生闭合相对路径,假如在stroke()方式以后启用closePath()方式,此时图型早已绘图进行,当今的绘图相对路径早已关掉,因此closePath()方式不起功效。

直线与像素界限

先看来1个事例

function drawLine(){
    //描边3角形
    cxt.lineWidth = 1;
    cxt.beginPath();
    cxt.moveTo(50, 50);
    cxt.lineTo(450, 50);
    cxt.stroke();
    cxt.beginPath();
    cxt.moveTo(50.5, 150.5);
    cxt.lineTo(450.5, 150.5);
    cxt.stroke();
}

从图中大家能够看出,大家将两条直线的lineWidth全是设定为1像素,可是上面的直线画出的确是两像素。 

假如你在某2个像素的界限处绘图1条1像素宽的直线,那末该直线具体会占有2个像素的宽度;

由于当你在像素界限处绘图1条1像素宽度的竖直直线时,canvas的制图自然环境目标会试着将半个像素画在界限中线的右侧,将此外半个像素画在界限中线的左侧。

但是,在1个整像素的范畴内绘图半个像素宽的直线是不能能的,因此在上下两个方位上的半个像素都被拓展为1个像素。

此外1层面,绘图在两个像素之间,这样的话,中线上下两边的那半个像素就不容易拓宽,它们融合起来正好占有1个像素的宽度。因此说,假如要绘图1条真实1像素宽度的直线,你务必将该直线绘图在某两个像素之间

网格的绘图

既然大家早已搞清楚了怎样绘图真实的1像素的直线,那大家就刚开始绘图网格

function drawLine(stepx, stepy){
    cxt.lineWidth = 0.5;
    cxt.strokeStyle = 'green';
    //绘图竖线
    for(var i= stepx + 0.5; i< cxt.canvas.width; i+= stepx){
        cxt.beginPath();
        cxt.moveTo(i, 0);
        cxt.lineTo(i, cxt.canvas.height);
        cxt.stroke();
    }
    //绘图横线
    for(var i= stepy + 0.5; i< cxt.canvas.height; i+= stepy){
        cxt.beginPath();
        cxt.moveTo(0, i);
        cxt.lineTo(cxt.canvas.width, i);
        cxt.stroke();
    }
}
drawLine(10, 10);

上面事例中大家将直线绘图在两个像素之间的像素上,并且绘图出来的直线唯一0.5像素宽,

虽然canvas标准沒有密文要求,但是全部访问器的Canvas完成都应用了“抗锯齿”技术性,便于建立出“亚像素”直线的绘图实际效果来

总结

本节內容关键解读canvas中相对路径中线形相对路径的绘图方式,关键是运用 moveTo()界定起始点,lineTo()界定终点站,stroke()勾勒当今相对路径。这3个方式绘图直线

canvas中绘图相对路径有两个关键的方式,beginPath()与closePath()。绘图图型以前先启用beginPath()是绘图好几个图型必要的流程。

closePath()在应用fill()时是能够省略的,并且还要留意closePath()方式的启用部位。

绘图直线时大家可使用 lineWidth更改直线的宽度,strokeStyle更改直线的色调。

搞清楚直线的像素界限,这样大家才可以绘图出真实的1像素线宽的直线。

对canvas绘图图型感兴趣爱好的同学,请不断关心后续升级,如有不对的地区也请指出并多多沟通交流。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。