如何获取 Canvas 的 2D 上下文？请列举几个基本的 Canvas 绘制方法。

获取 Canvas 的 2D 上下文

要获取 Canvas 的 2D 上下文，首先需要获取 Canvas 元素的引用，然后调用其 getContext() 方法并传入参数 "2d"。示例代码如下：

javascript
// 获取 Canvas 元素
const canvas = document.getElementById('myCanvas');

// 确保浏览器支持 Canvas
if (canvas.getContext) {
  // 获取 2D 上下文
  const ctx = canvas.getContext('2d');
  // 现在可以使用 ctx 进行绘制操作
} else {
  // 浏览器不支持 Canvas
  console.log('Your browser does not support the Canvas element.');
}

基本的 Canvas 绘制方法

Canvas 2D 上下文提供了丰富的绘制方法，以下是一些最基本的方法：

1. 绘制矩形：

   • fillRect(x, y, width, height)：绘制填充矩形
   • strokeRect(x, y, width, height)：绘制矩形边框
   • clearRect(x, y, width, height)：清除指定矩形区域

2. 绘制路径：

   • beginPath()：开始新路径
   • moveTo(x, y)：移动到路径起点
   • lineTo(x, y)：绘制直线到指定点
   • arc(x, y, radius, startAngle, endAngle, anticlockwise)：绘制圆弧
   • closePath()：关闭路径
   • fill()：填充路径
   • stroke()：描边路径

3. 设置样式：

   • fillStyle：设置填充样式（颜色、渐变或图案）
   • strokeStyle：设置描边样式
   • lineWidth：设置线条宽度
   • lineCap：设置线条端点样式
   • lineJoin：设置线条连接样式

4. 绘制文本：

   • fillText(text, x, y, maxWidth)：绘制填充文本
   • strokeText(text, x, y, maxWidth)：绘制文本边框
   • font：设置字体样式
   • textAlign：设置文本对齐方式
   • textBaseline：设置文本基线

5. 绘制图像：

   • drawImage(image, dx, dy)：绘制图像
   • drawImage(image, dx, dy, dWidth, dHeight)：缩放绘制图像
   • drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：裁剪并缩放绘制图像

示例：绘制一个简单的图形

javascript
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制一个红色填充的矩形
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

// 绘制一个蓝色边框的圆形
ctx.beginPath();
ctx.arc(150, 60, 50, 0, Math.PI * 2);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.stroke();

通过这些基本方法的组合，开发者可以创建出各种复杂的图形和效果。