您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

用线条绘制图形

本小节我们学习如何用线条绘制矩形和三角形。

绘制折线上一小节我们已经学过了,利用 moveTo、多个 lineTo 这三个就可以做到。本小节我们先用之前学过的绘制矩形。

先看整体案例,请在firefox浏览器中查看本案例。

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		const ctx = canvas.getContext('2d');
		
		
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		ctx.Style="blue"
        ctx.lineWidth=
		ctx.();
	</script>
</body>
</html>

如果你使用的是 firefox 浏览器,你会看到这样的:

chrome浏览器下的是这样的:

两个图一对比应该可以看出来,在firefox下,用上面绘制的矩形是有一定问题的,会有明显的缺口,这是由于绘制的线条宽度超过了 1px,如果绘制 1px 宽的线条,则不会有这个问题。

既然上面绘制的矩形不是很完美,那有没有比这个更好的绘制方案呢?这就要用到我们今天学习的新 closePath()

closePath() 用于创建从笔触当前点到开始点的路径。

先看整体案例,依然是在 firefox 浏览器下查看。

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		const ctx = canvas.getContext('2d');
		
		
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		// ctx.lineTo(10,10); //去掉了这一行
		ctx.closePath();      //最后一笔路径使用了closePath
		ctx.Style="blue"
		ctx.lineWidth=
		ctx.();
	</script>
</body>
</html>

运行结果:

我们利用 closePath 再绘制三角形,先看整体案例。

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		const ctx = canvas.getContext('2d');
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		ctx.closePath();      //最后一笔路径使用了closePath
		ctx.Style="blue"
		ctx.lineWidth=
		ctx.();
	</script>
</body>
</html>

运行结果:

可以看到闭合地非常完美。

本小节中我们使用到新的。

closePath() 主要作用是创建从笔触当前点到 moveTo 的点的路径,它的优势在于会处理接口闭合的问题。同学们可以用前面学过的知识绘制三角形,深刻体会一下 closePath() 的不同之处。

本小节我们学习了如何绘制矩形,还学习到了新的 closePath(),下一节我会带领大家学习直接使用绘制矩形去绘制图形。


联系我
置顶