HTML5中canvas中的beginPath()和closePath()的关键性

日期:2021-02-27 类型:科技新闻 

关键词:在线编辑图片,什么软件可以抠图,在线图片,p图软件电脑版,在线抠图

beginPath的功效很简易,便是刚开始1段新的相对路径,但在应用canvas制图的全过程中却十分关键

先看来1小段编码:

var ctx=document.getElementById("canvas").getContext("2d");
    ctx.beginPath();
    ctx.rect(150,150,100,100);
    ctx.fillStyle="green";
    ctx.fill();
    ctx.rect(0,0,100,100);
    ctx.fillStyle="yellow";
    ctx.fill();

大家的编码沒有不正确,但获得的确是两个边长100px的黄色的正方形,而并不是1绿1黄,这是为何呢?

客观事实上,canvas中的绘图方式(fill,stoke),都会以上1次“beginPath”以后的全部相对路径开展绘图,在上面的编码中第1个矩形框fill了两次,第1次翠绿色,第2次黄色,因此获得了两个黄色矩形框,一样的针对画直线,或别的曲线图,图型,无论你moveTo到哪,要是你沒有beiginPath,你全是在画1条相对路径。

假如你画的图型和你想像的不1致,记得查询1下beginPath。

谈到beginPath就迫不得已提1下closePath,客观事实上二者并没有关联,closePath的意思是关掉相对路径,并不是完毕相对路径,它只是将相对路径的终点站与起始点相连,并不是刚开始1个新相对路径。

大家在上面编码中第1个fill的后边加上1个closePath,获得的还是两个黄色矩形框。

但大家在后边加上1个beginPath,则获得两个不一样色调的矩形框。

总而言之,不必尝试根据闭合1段相对路径来刚开始新的相对路径,并且假如你不闭合相对路径,即便刚开始新的相对路径,其也不容易闭合。

填补:canvas的Beginpath和Closepath了解

beginPath()方式

  var ctx = document. getElementById ( 'cvs' ) . getContext ( '2d' ) ;   
 ctx. beginPath ( ) ;   
 ctx. moveTo ( 100.5 , 20.5 ) ;   
 ctx. lineTo ( 200.5 , 20.5 ) ;   
 ctx. stroke ( ) ;   
 ctx. moveTo ( 100.5 , 40.5 ) ;   
 ctx. lineTo ( 200.5 , 40.5 )   
 ctx. strokeStyle = '#f00' ;   
 ctx. stroke ( ) ;  

在其中的0.5是以便防止线条模糊不清难题。那末上面的编码会获得甚么样的图型呢?是否1条黑线1条红线呢?

从编码上看,大家的逻辑性没什么难题,但結果是大家获得的是两条红线,其实不是1黑1红。

假如你搞清楚这是为何,那后边的你就无需看了。这便是beginPath的关键性。

canvas中的绘图方式(如stroke,fill),都会以“上1次beginPath”以后的全部相对路径为基本开展绘图。例如上面的编码里边我stroke了两次,实际上这两次全是以第1次beginPath后的全部相对路径为基本画的。也便是说第1条相对路径大家stroke了两下,第1下是黑的,第2下是红的,因此最后也是红的。

1.无论你用moveTo把画笔挪动到哪里,要是不beginPath,那你1直全是在画1条相对路径。
2.fillRect与strokeRect这类立即画出单独地区的涵数,也 不 会打断当今的path.

假如你画出的图型和你想象的不1样,记得查询是不是有有效的beginPath.

————————————–

说到 beginPath ,就迫不得已提到 closePath ,二者是否有很“紧”的联络呢?回答是 基本上沒有关联 。

closePath的意思并不是完毕相对路径,而是 关掉 相对路径,它会尝试从当今相对路径的终点站连1条相对路径到起始点,让全部相对路径闭合起来。可是,这其实不代表着它以后的相对路径便是新相对路径了!

大家在上面的编码的第1个lineTo后边再加closePath,能够发现還是获得了两条红线。

但假如大家在第1个stroke后边再加beginPath,则会如愿以偿获得1条黑线1条红线。
 

ctx. stroke ( ) ;   
 ctx. beginPath ( ) ; //留意啦!   
 ctx. moveTo ( 100.5 , 40.5 ) ;   
 ctx. lineTo ( 200.5 , 40.5 )   
 ctx. strokeStyle = '#f00' ;   
ctx. stroke ( ) ;  

总而言之,便是 不必妄图根据闭合现有相对路径来刚开始1条新相对路径 ,而刚开始1条新相对路径,之前的相对路径也不容易闭合。
 

上一篇:html5 分层显示屏兼容的方式 返回下一篇:没有了