CanvasRenderingContext2D
对象是 HTML5 中 <canvas>
元素的绘图上下文对象,它提供了一组用于在 canvas 上进行 2D 图形绘制的方法和属性。通过获取这个上下文对象,你可以在 canvas 上进行绘制,包括绘制图形、文字、图像等。
以下是获取 CanvasRenderingContext2D
对象的方式:
javascript
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
上述代码中,myCanvas
是你 HTML 中 <canvas>
元素。
绘制形状
通过 CanvasRenderingContext2D
对象,你可以使用多种方法来绘制不同的形状,包括矩形、圆形、路径等。以下是一些基本的形状绘制方法:
绘制矩形
javascript
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
// 绘制填充矩形
context.fillStyle = 'blue';
context.fillRect(10, 10, 50, 50);
// 绘制边框矩形
context.strokeStyle = 'red';
context.lineWidth = 2;
context.strokeRect(70, 10, 50, 50);
绘制圆形
javascript
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
// 绘制填充圆形
context.beginPath();
context.arc(150, 35, 25, 0, 2 * Math.PI);
context.fillStyle = 'green';
context.fill();
// 绘制边框圆形
context.beginPath();
context.arc(220, 35, 25, 0, 2 * Math.PI);
context.strokeStyle = 'purple';
context.lineWidth = 2;
context.stroke();
绘制路径
javascript
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
// 绘制路径
context.beginPath();
context.moveTo(10, 100);
context.lineTo(50, 50);
context.lineTo(90, 100);
context.closePath();
// 填充路径
context.fillStyle = 'orange';
context.fill();
// 描边路径
context.strokeStyle = 'brown';
context.lineWidth = 2;
context.stroke();
这只是一些基本的例子,CanvasRenderingContext2D
提供了丰富的方法用于绘制各种形状和效果。你可以根据需要组合这些方法,创建出复杂的图形。
绘制文本
在 HTML5 中,你可以使用 CanvasRenderingContext2D
对象来绘制文本。以下是一个简单的例子:
javascript
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
// 设置文本样式
context.font = '20px Arial';
context.fillStyle = 'black';
// 绘制填充文本
context.fillText('Hello, Canvas!', 10, 30);
// 绘制描边文本
context.strokeStyle = 'blue';
context.lineWidth = 2;
context.strokeText('Hello, Canvas!', 10, 60);
上述代码中,fillText
方法用于填充文本,而 strokeText
方法用于描边文本。你可以通过设置 font
属性来指定文本的字体样式,设置 fillStyle
和 strokeStyle
属性来指定文本的填充颜色和描边颜色。
如果你需要在多行中绘制文本,可以使用 fillText
或 strokeText
方法,并在每行之间调整 y
坐标。