H5之beginPath和closePath的理解

最新推荐文章于 2024-01-10 00:00:00 发布

qq_37852483

最新推荐文章于 2024-01-10 00:00:00 发布

阅读量845

点赞数

分类专栏： H5

H5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

转载自：https://segmentfault.com/a/1190000010330319
关于beginPath的定义

beginPath():

CanvasRenderingContext2D.beginPath() 是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。当你想创建一个新的路径时，调用此方法。

在我们绘制路径的时候，实际上会有一个路径列表帮我们纪录当前所画的的子路径，而这整一个列表就是我们当前绘制的路径。那么子路径是什么鬼呢？意思就是比如你东画一条线，西画一条线，中间还画了一条线，这三条线就是子路径，它们不必首尾相连，可以相交也可以不相交。当你调用beginPath()方法的时候，就会把这整个列表清空，无论你有没有fill()或者stroke()，统统死啦死啦地。

moveTo():

CanvasRenderingContext2D.closePath() 是 Canvas 2D API 将笔点返回到当前子路径起始点的方法。它尝试从当前点到起始点绘制一条直线。如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作。

注意，是子路径。这里的定义已经说得比较清楚了，就没什么必要赘述了。

再看看beginPath对造成的影响

<html>
<head>
    <title>canvas</title>
</head>
<canvas id="myCanvas" width="500px" height="500px" style="border:1px solid black"></canvas>

<script>
    var myCanvas = document.getElementById("myCanvas");
    var context = myCanvas.getContext("2d");
    
    context.beginPath();
    context.moveTo(100,100);
    context.lineTo(200,100);
    context.strokeStyle = "red";
    context.stroke();

    context.beginPath();
    context.moveTo(100,200);
    context.lineTo(200,200);
    context.strokeStyle = "blue";
    context.stroke();

    context.beginPath();
    context.moveTo(100,300);
    context.lineTo(200,300);
    context.strokeStyle = "yellow";
    context.stroke();
</script>
</html>

结果是
在这里插入图片描述

当我们注释第san个beginPath时候，结果是
在这里插入图片描述
我们可以看到第一条线变成紫色因为第一条线被两种颜色画过，红+蓝=紫色
转载自：https://www.cnblogs.com/xuehaoyue/p/6549682.html

qq_37852483

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5之beginPath和closePath的理解

CanvasRenderingContext2D.beginPath() 是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。当你想创建一个新的路径时，调用此方法。
复制链接

扫一扫