老师是这样吗

来源:3-5 编程练习

hy_wang

2018-08-03 12:28:54

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        canvas{background-color:lightpink;}
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="600">
        您的浏览器不支持canvas
    </canvas>
    <script>
	var canvas=document.getElementById('canvas'),
		ctx=canvas.getContext('2d');
		ctx.moveTo(200,100);
		ctx.strokeStyle='blue';
		ctx.lineTo(300,200);
		ctx.stroke();
		ctx.beginPath();
		ctx.moveTo(300,200);
		ctx.strokeStyle='yellow';
		ctx.lineTo(100,200);
		ctx.stroke();
		ctx.beginPath();
		ctx.moveTo(100,200);
		ctx.strokeStyle='red';
		ctx.lineTo(200,100);
		ctx.stroke();
	</script>
</body>

</html>

老师是这样吗

如果说我把线变宽那三角形就有间隙了要消除间隙怎么处理。

beginpath、后closePath()无效了啊

写回答

1回答

好帮手慕夭夭

2018-08-03

因为两条线都是一个路径才可以使用closePath()闭合 ,代码中 , 每条线都是重新开始的路径 ,所以无效哦 , 如下 :

http://img.mukewang.com/climg/5b63ed1600011a0704400337.jpg

可以使用ctx.lineJoin = 'round'; 使交界处闭合哦 , 整体代码如下修改 :

http://img.mukewang.com/climg/5b63f0af0001666403910397.jpg

完善一下吧 ,祝学习愉快 ,望采纳



0

0 学习 · 4826 问题

查看课程