编程语言
首页 > 编程语言> > JavaScript 练手小技巧:canvas 中 beginPath() 的重要性

JavaScript 练手小技巧:canvas 中 beginPath() 的重要性

作者:互联网

例1:

<canvas id="cvs" width="400" height="400"></canvas>
var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx.moveTo(100,50);
ctx.lineTo(250,50);
ctx.stroke();
ctx.moveTo(100,150);
ctx.lineTo(250,150);
ctx.strokeStyle = '#f00';
ctx.stroke();

从代码来看,第一次stroke() ,画黑线。第二次 stroke() ,画红线。所以,结果是一黑一红,两根线条。

但是,实际上是 两根红线~!!!

因为:canvas中的绘制方法(如stroke,fill),都会以“上一次beginPath”之后的所有路径为基础进行绘制。

也就是说第一条路径我们stroke了两次,第一次是黑的,第二次是红的,所以最终也是红的。

例2:

在canvas 上移动鼠标,画一根连接起点

let c ={};
// 获取鼠标坐标
c.getPosition = function(ele){
    let mouse = {x:0,y:0};
    ele.addEventListener("mousemove",function(e){
        let { clientX,clientY }=e;
        mouse.x = clientX - ele.getBoundingClientRect().x;
        mouse.y = clientY - ele.getBoundingClientRect().y;
    });
    return mouse ;
};
let pos =  c.getPosition(cvs);     // 获取鼠标坐标

cvs.addEventListener("mousemove",function(){
        ctx.clearRect(0,0,400,400);   // 清空画布 
        ctx.lineTo(200,200);
        ctx.lineTo(pos.x,pos.y);
        ctx.stroke();
});

虽然 mousemove 的时候,情空空了画布,但是 stroke 的时候,依然把以前的路径画了出来。

但是,在 mousemove 的时候,添加了 beginPath,每次就只画 beginPath 之后的一根线条。

总结:

每次 canvas 绘图之前,建议都加上 beginPath() 。

说到beginPath,就不得不提到closePath。

初学者会往往会认为两者有很“紧密”的联系。一个开始,一个“闭合”。可惜,实际上它们几乎没有关系。

closePath的意思不是结束路径,而是“闭合”路径,它会试图从当前路径的终点连到当前路径的起点,让整个路径闭合起来。

但是,这并不意味着它之后的路径就是新路径了!

标签:练手,canvas,路径,JavaScript,ctx,ele,stroke,lineTo,beginPath
来源: https://blog.csdn.net/weixin_42703239/article/details/113576246