网站首页

canvas入门教程基础教程用线条绘制图形

canvas
入门教程基础教程用线条绘制图形
访问量：11
2023-07-23 15:52:19.0
无极低码 ：https://wheart.cn

用线条绘制图形

1. 前言

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

2. 线条绘制矩形

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

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

实例演示
预览 复制
复制成功！ 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>xx网Wiki</title>
    <style> #imooc{ border:1px solid #ccc; } </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
	
	<script> const canvas = document.getElementById('imooc'); const ctx = canvas.getContext('2d'); ctx.moveTo(10,10); ctx.lineTo(10,100); ctx.lineTo(200,100); ctx.lineTo(200,10); ctx.lineTo(10,10); ctx.strokeStyle="blue" ctx.lineWidth=8 ctx.stroke(); </script>
</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

如果你使用的是 firefox 浏览器，你会看到这样的效果：

Firefox展示效果

chrome浏览器下的效果是这样的：

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

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

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

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

实例演示
预览 复制
复制成功！ 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>xx网Wiki</title>
    <style> #imooc{ border:1px solid #ccc; } </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
	
	<script> const canvas = document.getElementById('imooc'); const ctx = canvas.getContext('2d'); ctx.moveTo(10,10); ctx.lineTo(10,100); ctx.lineTo(200,100); ctx.lineTo(200,10); // ctx.lineTo(10,10); //去掉了这一行 ctx.closePath(); //最后一笔路径使用了closePath方法 ctx.strokeStyle="blue" ctx.lineWidth=8 ctx.stroke(); </script>
</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

运行结果：

closePath闭合矩形

3. 线条绘制三角形

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

实例演示
预览 复制
复制成功！ 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>xx网Wiki</title>
    <style> #imooc{ border:1px solid #ccc; } </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
	
	<script> const canvas = document.getElementById('imooc'); const ctx = canvas.getContext('2d'); ctx.moveTo(10,10); ctx.lineTo(10,100); ctx.lineTo(200,100); ctx.closePath(); //最后一笔路径使用了closePath方法 ctx.strokeStyle="blue" ctx.lineWidth=8 ctx.stroke(); </script>
</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

运行结果：

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

4. 路径方法整理

本小节中我们使用到一个新的方法。

4.1 closePath(x, y)

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

5. 总结

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

无极低码 ：https://wheart.cn
最新文章