在JavaScript中创建/修改图像

// 获取Canvas上下文对象
const ctx = document.getElementById('myCanvas').getContext('2d');

// 设置填充颜色和样式
ctx.fillStyle = 'red';

// 填充矩形
ctx.fillRect(10, 10, 50, 50);

// 设置描边颜色和样式
ctx.strokeStyle = 'blue';

// 描边矩形
ctx.strokeRect(30, 30, 50, 50);

// 清除矩形区域
ctx.clearRect(40, 40, 20, 20);

// 绘制图像
const image = new Image();
image.src = 'example.png';
image.onload = function() {
  ctx.drawImage(image, 50, 50, 100, 100);
};

// 绘制圆弧
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, true);
ctx.fill();

// 绘制二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(150, 50);
ctx.quadraticCurveTo(175, 25, 200, 50);
ctx.stroke();

// 绘制三次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(150, 100);
ctx.bezierCurveTo(175, 75, 175, 125, 200, 100);
ctx.stroke();