在JavaScript中创建/修改图像

在JavaScript中，可以使用HTML的<canvas>元素和Canvas API来创建和修改图像。

以下是一些常用的Canvas API方法和属性：

getContext()：获取Canvas上下文对象，可以使用"2d"参数来获取2D渲染上下文。
fillStyle：设置填充颜色和样式。
fillRect()：填充矩形。
strokeStyle：设置描边颜色和样式。
strokeRect()：描边矩形。
clearRect()：清除矩形区域。
drawImage()：绘制图像。
lineWidth：设置线宽。
lineCap：设置线条端点样式。
lineJoin：设置线条连接样式。
beginPath()：开始新路径。
moveTo()：将绘图光标移动到指定位置。
lineTo()：绘制直线。
closePath()：闭合路径。
fill()：填充路径。
stroke()：描边路径。
clip()：创建剪切路径。
arc()：绘制圆弧。
quadraticCurveTo()：绘制二次贝塞尔曲线。
bezierCurveTo()：绘制三次贝塞尔曲线。

以下是一个简单的示例，演示如何使用Canvas API在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();

在这个示例中，我们使用了Canvas API来创建和修改图像，包括绘制矩形、圆弧、二次贝塞尔曲线和三次贝塞尔曲线。

总之，在JavaScript中，可以使用HTML的<canvas>元素和Canvas API来创建和修改图像，并且可以使用各种方法和属性来自定义图像的样式和内容。