html5 - 请教一下canvas方法beginPath。-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html5 - 请教一下canvas方法beginPath。

怪我咯 2017-04-17 13:51:54

[HTML讨论组]

380

问题：
我通过beginPath方法来创建2个三角形的路径，然后统一用stroke来描边。结果只能画出第2个三角形，为什么第1个三角形画不出来呢？
代码：

<body>
    <canvas width="600" height="300"></canvas>
<script>
window.onload=function(){ 

    var ctx = document.querySelector('canvas').getContext('2d');
    
    ctx.lineWidth=4;
    // 新建路径1
    ctx.beginPath();
    ctx.moveTo(100,20);
    ctx.lineTo(200,100);
    ctx.lineTo(100,100);
    ctx.lineTo(100,20);
    ctx.closePath();

    // 新建路径2
    ctx.beginPath();
    ctx.moveTo(200,40);
    ctx.lineTo(400,200);
    ctx.lineTo(200,200);
    ctx.lineTo(200,40);
    ctx.closePath();

    // 统一描边
    ctx.stroke();
};
</script>    
</body>

截图：

怪我咯

走同样的路，发现不同的人生

全部回复(2)

PHP中文网2017-04-17 13:53:54 2楼

/*ctx.closePath();
//ctx.stroke();分开描边
// 新建路径2
ctx.beginPath();*///或者注释掉这一段

两种方式：1.分开描边
2.把中间那团去掉（因为描边从beginPath到closepath结束）

赞 +0

添加回复

迷茫2017-04-17 13:53:54 1楼

中间那个closePath()去掉貌似就可以了

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

app下载

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP中文网抖音号: 发现有趣的

PHP学习

技术支持

返回顶部