canvas基础功能介绍

大家好，我是梅巴哥er。 最近在看一些html基础知识，刚看了canvas的相关知识，做个基础整理。如需了解更多内容，请移步cavas在MDN上的教程，可以学习更多更深入的知识。

本篇就以代码demo的形式，对基础功能进行罗列。

---

Canvas

就是一块画布。 用js在画布上画画的。

基础步骤：

<!-- 1，准备一个canvas标签，默认尺寸是宽300px，高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2，获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3，获取2d画布（这里先说2d的）
  const ctx = canvas.getContext('2d')
  // 4，给图像填色
  ctx.fillStyle = 'pink'
  // 5，规定图像的位置和宽高，即left top width height，单位是px
  ctx.fillRect(10, 10, 100, 100)
</script>

画一个矩形：

<!-- 1，准备一个canvas标签，默认尺寸是宽300px，高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2，获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3，获取2d画布
  const ctx = canvas.getContext('2d')
  // 填充一个黑色长方形
  ctx.fillRect(25, 25, 120, 100) 
  // 把里面清除掉，留出一个1px边框的长方形
  ctx.clearRect(26, 26, 118, 98)
</script>

画一个实心的三角形：

<!-- 1，准备一个canvas标签，默认尺寸是宽300px，高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2，获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3，获取2d画布
  const ctx = canvas.getContext('2d')
  // 开始
  ctx.beginPath()
  // 起点
  ctx.moveTo(20, 30)
  // 往这个点画
  ctx.lineTo(100, 50)
  // 往这个点画
  ctx.lineTo(50, 120)
  // 默认开启闭合路径 ctx.closePath()，即把另一条没画的线也默认连上，形成一个三角形
  // 填充成实心图像
  ctx.fill()
</script>

画一个空心三角形：

<!-- 1，准备一个canvas标签，默认尺寸是宽300px，高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2，获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3，获取2d画布
  const ctx = canvas.getContext('2d')
  // 开始
  ctx.beginPath()
  // 起点，相当于每次的起笔位置
  ctx.moveTo(20, 30)
  // 往这个点画
  ctx.lineTo(100, 50)
  // 往这个点画
  ctx.lineTo(50, 120)
  // stroke()情况下，不会默认闭合路径，所以这里要主动开启
  ctx.closePath()
  // 绘制线条
  ctx.stroke()

画一条直线：

<!-- 1，准备一个canvas标签，默认尺寸是宽300px，高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2，获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3，获取2d画布
  const ctx = canvas.getContext('2d')
  // 开始
  ctx.beginPath()
  // 起点
  ctx.moveTo(20, 30)
  // 往这个点画
  ctx.lineTo(100, 50)
  // 绘制线条
  ctx.stroke()
</script>

画空心圆：

<!-- 1，准备一个canvas标签，默认尺寸是宽300px，高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2，获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3，获取2d画布
  const ctx = canvas.getContext('2d')
  // 开始
  ctx.beginPath()
  // ctx.arc(x, y, r, s, e, a)
  // x, y定义圆点坐标
  // r表示半径，不用写单位
  // s表示开始弧度，沿着x正方向是0
  // e表示结束弧度
  // a表示顺时针还是逆时针。 默认是顺时针，也就是false
  // 弧度 = Math.PI * (角度 / 180)
  ctx.arc(100, 100, 50, 0, Math.PI * 2, true)
  // stroke()是绘制线条
  ctx.stroke()
</script>

画实心圆：

<!-- 1，准备一个canvas标签，默认尺寸是宽300px，高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2，获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3，获取2d画布
  const ctx = canvas.getContext('2d')
  // 开始
  ctx.beginPath()
  // ctx.arc(x, y, r, s, e, a)
  // x, y定义圆点坐标
  // r表示半径，不用写单位
  // s表示开始弧度，沿着x正方向是0
  // e表示结束弧度
  // a表示顺时针还是逆时针。 默认是顺时针，也就是false
  // 弧度 = Math.PI * (角度 / 180)
  ctx.arc(100, 100, 50, 0, Math.PI * 2, true)
  // fill()是闭合路径并填充成实心
  ctx.fill()
</script>

画一段逆时针圆弧：

<!-- 1，准备一个canvas标签，默认尺寸是宽300px，高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2，获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3，获取2d画布
  const ctx = canvas.getContext('2d')
  // 开始
  ctx.beginPath()
  // ctx.arc(x, y, r, s, e, a)
  // x, y定义圆点坐标
  // r表示半径，不用写单位
  // s表示开始弧度，沿着x正方向是0
  // e表示结束弧度
  // a表示顺时针还是逆时针。 默认是顺时针，也就是false
  // 弧度 = Math.PI * (角度 / 180)
  ctx.arc(100, 100, 50, Math.PI / 3, Math.PI, true)
  ctx.stroke()
</script>

画一段顺时针圆弧：

<!-- 1，准备一个canvas标签，默认尺寸是宽300px，高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2，获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3，获取2d画布
  const ctx = canvas.getContext('2d')
  // 开始
  ctx.beginPath()
  // ctx.arc(x, y, r, s, e, a)
  // x, y定义圆点坐标
  // r表示半径，不用写单位
  // s表示开始弧度，沿着x正方向是0
  // e表示结束弧度
  // a表示顺时针还是逆时针。 默认是顺时针，也就是false
  // 弧度 = Math.PI * (角度 / 180)
  ctx.arc(100, 100, 50, Math.PI / 3, Math.PI, false)
  ctx.stroke()
</script>

*注意：通过上面两个例子可以看出，结束点的弧度总是相对于x轴的正方向来算的。 和起始弧度无关。

给三角形设置线条颜色：

<!-- 1，准备一个canvas标签，默认尺寸是宽300px，高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2，获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3，获取2d画布
  const ctx = canvas.getContext('2d')
  // 设置默认颜色。 一旦设置，后续的颜色都将使用这个默认色。
  // 如果需要更改，则在后续再重新设置strokeStyle的值。
  ctx.strokeStyle = 'pink'
  // 开始
  ctx.beginPath()
  ctx.moveTo(20, 20)
  ctx.lineTo(40, 100)
  ctx.lineTo(100, 50)
  ctx.closePath()
  ctx.stroke()
  
</script>

给三角形设置填充颜色：

<!-- 1，准备一个canvas标签，默认尺寸是宽300px，高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2，获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3，获取2d画布
  const ctx = canvas.getContext('2d')
  // 设置默认颜色。 一旦设置，后续的颜色都将使用这个默认色。
  // 如果需要更改，则在后续再重新设置strokeStyle的值。
  ctx.fillStyle = 'pink'
  // 开始
  ctx.beginPath()
  ctx.moveTo(20, 20)
  ctx.lineTo(40, 100)
  ctx.lineTo(100, 50)
  ctx.fill()
</script>

填充文字：

<!-- 1，准备一个canvas标签，默认尺寸是宽300px，高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2，获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3，获取2d画布
  const ctx = canvas.getContext('2d')
  ctx.font = '48px serif'
  textAlign = 'center'
  // ctx.fillText(text, x, y)
  // text是文本内容
  // x， y是内容的定位坐标
  ctx.fillText('Hello world', 10, 50)
</script>

填充描边文字：

<!-- 1，准备一个canvas标签，默认尺寸是宽300px，高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2，获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3，获取2d画布
  const ctx = canvas.getContext('2d')
  ctx.font = '48px serif'
  textAlign = 'center'
  // ctx.fillText(text, x, y)
  // text是文本内容
  // x， y是内容的定位坐标
  ctx.strokeText('Hello world', 10, 50)
</script>

画布的保存

ctx.save() // 保存当前状态到栈中
ctx.restore() // 把之前的状态从栈中弹出，然后保存最新的状态

移动原点位置：

<!-- 1，准备一个canvas标签，默认尺寸是宽300px，高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2，获取canvas元素
  const canvas = document.getElementById('canvas')
  
  // 3，获取2d画布
  const ctx = canvas.getContext('2d')
  // 把原点位置移动到新坐标
  ctx.translate(50, 50)
  ctx.font = '48px serif'
  textAlign = 'center'
  // ctx.fillText(text, x, y)
  // text是文本内容
  // x， y是内容的定位坐标
  ctx.strokeText('Hello world', 10, 50)
</script>

旋转

<!-- 1，准备一个canvas标签，默认尺寸是宽300px，高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2，获取canvas元素
  const canvas = document.getElementById('canvas')
  
  // 3，获取2d画布
  const ctx = canvas.getContext('2d')
  // 默认以原点为圆心， 顺时针旋转60弧度
  ctx.rotate(Math.PI / 3)
  ctx.font = '48px serif'
  textAlign = 'center'
  // ctx.fillText(text, x, y)
  // text是文本内容
  // x， y是内容的定位坐标
  ctx.strokeText('Hello world', 10, 50)
</script>

缩放

<!-- 1，准备一个canvas标签，默认尺寸是宽300px，高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2，获取canvas元素
  const canvas = document.getElementById('canvas')
  
  // 3，获取2d画布
  const ctx = canvas.getContext('2d')
  // ctx.scale(x, y)
  // x是沿着x轴方向缩放，y是沿着y轴方向缩放
  // x ，y 如果大于1， 就是放大， 如果小于1， 就是缩小
  ctx.scale(2, 3)
  ctx.font = '48px serif'
  textAlign = 'center'
  // ctx.fillText(text, x, y)
  // text是文本内容
  // x， y是内容的定位坐标
  ctx.strokeText('Hello world', 10, 50)
</script>

---

基本上就是这些基础功能了。

在MDN上讲解很详细，有兴趣可以去查看和学习更多知识。

---

以上。