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: 居中对齐。
<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
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>
