标签：练手 canvas 路径 JavaScript ctx ele stroke lineTo 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。