// 定义一个绘图类
class Graphics {
constructor(canvas) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
}
// 绘制圆形
drawCircle(x, y, radius, fillColor) {
this.ctx.beginPath();
this.ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
this.ctx.fillStyle = fillColor;
this.ctx.fill();
}
// 绘制矩形
drawRect(x, y, width, height, fillColor) {
this.ctx.fillStyle = fillColor;
this.ctx.fillRect(x, y, width, height);
}
// 绘制线段
drawLine(startX, startY, endX, endY, lineColor, lineWidth) {
this.ctx.beginPath();
this.ctx.moveTo(startX, startY);
this.ctx.lineTo(endX, endY);
this.ctx.strokeStyle = lineColor;
this.ctx.lineWidth = lineWidth;
this.ctx.stroke();
}
// 绘制图片
drawImage(image, x, y, width, height) {
this.ctx.drawImage(image, x, y, width, height);
}
}
// 使用示例
const canvas = document.getElementById('myCanvas');
const graphics = new Graphics(canvas);
graphics.drawCircle(75, 75, 50, 'green');
graphics.drawRect(12, 12, 100, 200, 'blue');
graphics.drawLine(0, 0, 200, 100, 'red', 5);
const image = new Image();
image.src = 'path_to_image.jpg';
image.onload = () => {
graphics.drawImage(image, 50, 50, 100, 100);
};这段代码定义了一个名为Graphics的类，它封装了绘制图形的各种方法。通过实例化Graphics类，并调用其方法，可以在指定的canvas上绘制不同的图形。这种面向对象的方式使得代码结构清晰，易于管理和扩展。