用线条绘制图形
本小节我们学习如何用线条绘制矩形和三角形。
绘制折线上一小节我们已经学过了,利用 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()
,下一节我会带领大家学习直接使用绘制矩形去绘制图形。