Canvas简介与基本使用（下）-阿里云开发者社区

3.5 绘制三角形

绘制两个三角形，一个是填充的，另一个是描边的。

需要用到的方法：

beginPath()：新建一条路径。

closePath()：闭合路径。

stroke()：通过线条来绘制图形轮廓。

fill()：通过填充路径的内容区域生成实心的图形。

<canvas id="canvas" width="400" height="400"></canvas>
<script>
  // 获取 canvas 元素
  var canvas = document.getElementById('canvas');
  // 获取绘图上下文
  var ctx = canvas.getContext('2d');
  // 填充三角形
  ctx.beginPath();
  ctx.moveTo(25, 25);
  ctx.lineTo(105, 25);
  ctx.lineTo(25, 105);
  ctx.fill();
  // 描边三角形
  ctx.beginPath();// 重新开启一个路径
  ctx.moveTo(125, 125);
  ctx.lineTo(125, 45);
  ctx.lineTo(45, 125);
  ctx.closePath();
  ctx.stroke();
</script>

beginPath()重新开启一个路径，后面的线段不会影响前面的线段。

使用填充（fill）时，路径自动闭合，使用描边（stroke）则不会闭合路径。如果没有添加闭合路径closePath()到描边三角形函数中，则只绘制了两条线段，并不是一个完整的三角形。

3.6 绘制矩形

可以使用线段来描绘矩形，但 canvas 也提供了 rect() 等方法可以直接生成矩形。

使用 strokeRect() 描边矩形

<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  ctx.strokeStyle = 'pink'
  ctx.strokeRect(50, 50, 200, 100)  // strokeRect(x, y, width, height)
</script>

使用 fillRect() 填充矩形

<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  ctx.fillStyle = 'pink'
  ctx.fillRect(50, 50, 200, 100) // fillRect(x, y, width, height)
</script>

使用 rect() 生成矩形

注意：rect() 方法被调用后，还需调用 stroke() 或 fill() 辅助渲染。

<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  ctx.strokeStyle = 'red'
  ctx.fillStyle = 'pink'
  ctx.rect(50, 50, 200, 100) // rect(x, y, width, height)
  ctx.stroke()
  ctx.fill()
</script>

使用 clearRect() 清空矩形

<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  ctx.fillStyle = 'pink' // 设置填充颜色
  ctx.fillRect(50, 50, 200, 200) // 填充矩形
  ctx.clearRect(60, 60, 180, 90) // 清空矩形
</script>

3.7 绘制文本

语法：

ctx.font = 'font-style font-variant font-weight font-size/line-height font-family'

strokeText() 方法绘制描边文本

<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  ctx.font = '60px Arial' 
  cxt.strokeStyle = 'pink' // 设置文本描边颜色
  ctx.strokeText('好运', 30, 90)  //strokeText(text, x, y, maxWidth)
</script>

fillText() 绘制填充文本

<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  ctx.font = '60px Arial' 
  ctx.font = '60px Arial' 
  ctx.fillStyle = 'pink'
  ctx.fillText('好运', 30, 90)
</script>

textAlign设置文字的水平对齐方式

1.start: 默认。在指定位置的横坐标开始。

2.end: 在指定坐标的横坐标结束。

3.left: 左对齐。

4.right: 右对齐。

5.center: 居中对齐。

const canvas = document.getElementById('canvas')

const ctx = canvas.getContext('2d')

<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  // 参考线
  ctx.moveTo(200, 0)
  ctx.lineTo(200, 400)
  ctx.strokeStyle = 'red'
  ctx.stroke()
  ctx.font = '30px Arial'
  // 横坐标开始位对齐
  ctx.textAlign = 'start' // 默认值,
  ctx.fillText('好运start', 200, 40)
  // 横坐标结束位对齐
  ctx.textAlign = 'end' // 结束对齐
  ctx.fillText('好运end', 200, 100)
  // 横坐标开始位对齐
  ctx.textAlign = 'left' // 默认值,
  ctx.fillText('好运start', 200, 160)
  // 横坐标结束位对齐
  ctx.textAlign = 'right' // 结束对齐
  ctx.fillText('好运end', 200, 220)
  // 居中对齐
  ctx.textAlign = 'center' // 右对齐
  ctx.fillText('好运center', 200, 280)
</script>

textBaseline设置文字的垂直对齐方式

1.alphabetic: 默认。文本基线是普通的字母基线。

2.top: 文本基线是 em 方框的顶端。

3.bottom: 文本基线是 em 方框的底端。

4.middle: 文本基线是 em 方框的正中。

5.hanging: 文本基线是悬挂基线。

<canvas id="canvas" width="800" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  // 参考线
  ctx.moveTo(0, 150)
  ctx.lineTo(800, 150)
  ctx.strokeStyle = 'red'
  ctx.stroke()
  ctx.font = '20px Arial'
  // 默认 alphabetic
  ctx.textBaseline = 'alphabetic'
  ctx.fillText('好运alphabetic', 10, 150)
  // 默认 top
  ctx.textBaseline = 'top'
  ctx.fillText('好运top', 200, 150)
  // 默认 bottom
  ctx.textBaseline = 'bottom'
  ctx.fillText('好运bottom', 320, 150)
  // 默认 middle
  ctx.textBaseline = 'middle'
  ctx.fillText('好运middle', 480, 150)
  // 默认 hanging
  ctx.textBaseline = 'hanging'
  ctx.fillText('好运hanging', 640, 150)
</script>

3.8 绘制图片

使用 drawImage() 方法绘制图片，语法：

drawImage(image, dx, dy)

image: 要渲染的图片对象。

dx: 图片左上角的横坐标位置。

dy: 图片左上角的纵坐标位置。

<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  // 1 创建 Image 对象
  const image = new Image()
  // 2 引入图片
  image.src = './images/hz.png'
  // 3 等待图片加载完成
  image.onload = () => {
    // 4 使用 drawImage() 方法渲染图片
    ctx.drawImage(image, 30, 30)  
  }
</script>

Canvas简介与基本使用（下）

3.5 绘制三角形

3.6 绘制矩形

3.7 绘制文本

3.8 绘制图片

热门文章

最新文章

相关电子书