canvas 使用方法

好的，以下是canvas的基本使用方法：

1. 创建canvas元素：首先在HTML页面中创建一个canvas元素，可以使用标签`<canvas>`或JavaScript代码动态创建，例如：

   <canvas id="myCanvas"></canvas>

   const canvas = document.createElement('canvas');
   canvas.id = 'myCanvas';
   document.body.appendChild(canvas);

2. 获取canvas上下文：使用JavaScript代码获取canvas元素的上下文(context)，可以通过上下文对象对canvas进行绘制，例如：

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

上面的代码获取了一个2D上下文对象，可以使用该对象进行2D绘图。

3. 绘制图形：使用canvas的上下文对象进行绘制，可以绘制直线、矩形、圆形、文本等各种图形，例如：

   const canvas = document.getElementById('myCanvas');
   const context = canvas.getContext('2d');
   context.fillStyle = 'red'; // 设置填充颜色
   context.fillRect(10, 10, 100, 100); // 绘制矩形
   context.strokeStyle = 'green'; // 设置线条颜色
   context.lineWidth = 5; // 设置线条宽度
   context.strokeRect(20, 20, 80, 80); // 绘制矩形边框
   context.beginPath(); // 开始路径
   context.arc(60, 60, 30, 0, Math.PI * 2); // 绘制圆形
   context.closePath(); // 结束路径
   context.fill(); // 填充圆形
   context.stroke(); // 绘制圆形边框
   context.font = '20px Arial'; // 设置字体
   context.fillStyle = 'blue'; // 设置文本颜色
   context.fillText('Hello, world!', 20, 100); // 绘制文本

上面的代码绘制了一个红色的矩形，绿色的矩形边框，蓝色的文本和一个填充和边框都为黑色的圆形。

4. 清空canvas：使用canvas的上下文对象可以清空canvas，可以使用`clearRect()`方法清空整个canvas，或者使用`fillRect()`或`strokeRect()`方法覆盖原有图形，例如：

   const canvas = document.getElementById('myCanvas');
   const context = canvas.getContext('2d');
   context.clearRect(0, 0, canvas.width, canvas.height); // 清空整个canvas
   context.fillRect(0, 0, canvas.width, canvas.height); // 使用黑色矩形覆盖原有图形

上面的代码清空了整个canvas，并使用黑色矩形覆盖原有图形。

以上是canvas的基本使用方法，希望能够帮助您入门canvas绘图。