低成本网站制作施工企业向建设单位提供预付款担保产生的费用属于
Canvas基础篇：图形绘制
- 图形绘制
- moveTo()
- lineTo()
- lineTo绘制一条直线
- 代码示例
- 效果预览
- lineTo绘制平行线
- 代码示例
- 效果预览
- lineTo绘制矩形
- 代码示例
- 效果预览
- arc()
- arc绘制一个圆
- 代码实现
- 效果预览
- arc绘制一段弧
- 代码实现
- 效果预览
- arcTo()
- rect()
- 曲线
- 结语
图形绘制
在之前的文章 Canvas基础篇：路径绘制 中，讲述了图形绘制的四个步骤以及图形开始路径、闭合路径、边框模式和填充模式。
本文将讲解在Canvas中，常见的几种图形绘制API。
moveTo()
moveTo()：将笔触移动到指定的坐标 x 以及 y 上，该方法本身并不能画出任何东西，可以理解为在Canvas上绘图，需要落笔的起始位置。通常跟在 beginPath() 后面使用，或者在Canvas初始化时使用，其语法如下所示：
moveTo(x, y)
lineTo()
lineTo()方法用于绘制一条直线，其语法如下所示：
lineTo(x, y)
lineTo绘制一条直线
代码示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制直线</title>
</head><body><canvas id="canvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath();ctx.moveTo(50, 50)ctx.lineTo(100, 100)ctx.stroke()</script>
</body></html>
效果预览
lineTo绘制平行线
代码示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制平行线</title>
</head><body><canvas id="canvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath()ctx.moveTo(50, 50)ctx.lineTo(150, 50)ctx.stroke()ctx.beginPath()ctx.moveTo(50, 100)ctx.lineTo(150, 100)ctx.stroke()</script>
</body></html>
效果预览
lineTo绘制矩形
代码示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制矩形</title>
</head><body><canvas id="canvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath()ctx.moveTo(50, 50)ctx.lineTo(150, 50)ctx.lineTo(150, 100)ctx.lineTo(50, 100)ctx.lineTo(50, 50)ctx.stroke()</script>
</body></html>
效果预览
arc()
arc()方法可以用来画一个圆或者画一个圆弧，，其语法如下所示：
arc(x, y, radius, startAngle, endAngle, anticlockwise)
其中，(x, y)代表圆心坐标；radius代表圆形半径；startAngle和endAngle分别代表起始角度和终止角度；anticlockwise取值为布尔值，用来标记是顺时针画圆还是逆时针画圆：值为true（默认值），表示顺时针；值为false表示逆时针。
注：startAngle和endAngle是以弧度为单位，如180°应该是Math.PI
度数到弧度的转换公式：
弧度 = 度数 ∗ M a t h . P I / 180 弧度 = 度数 * Math.PI / 180 弧度=度数∗Math.PI/180
arc绘制一个圆
代码实现
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制圆</title>
</head><body><canvas id="canvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath()ctx.arc(100, 100, 50, 0, 2 * Math.PI, true)ctx.fill()</script>
</body></html>
效果预览
arc绘制一段弧
代码实现
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制弧</title>
</head><body><canvas id="canvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath()ctx.arc(100, 100, 50, 0, 90 * Math.PI / 180, false)ctx.closePath()ctx.stroke()</script>
</body></html>
效果预览
arcTo()
arcTo()也用于绘制一段圆弧，其效果和arc()相同，且官网并不推荐这个方法，因为在某些情况下，它可能并不可靠，所以本文不做讲解。
rect()
rect()方法用于绘制一个矩形，在 Canvas基础篇：绘制矩形 一文中讲述过，本文不再赘述。
曲线
圆弧是一种特殊的曲线，弧线上每一点的曲率都相同；曲线上每个点的曲率就不一定了。Canvas中有两种支持绘制曲线的方式：二次贝塞尔曲线和三次贝塞尔曲线，该内容在后面的文章中会详细讲解。
结语
本文主要介绍了Canvas中几种图形的绘制方式，包括直线、圆弧等。对于文章中错误的地方或者有任何问题，欢迎在评论区留言分享！