js 在图片上绘图

在JavaScript中，可以使用HTML5的<canvas>元素来在图片上绘图。<canvas>元素提供了一个2D绘图环境，可以用来绘制图形、文字、图像等。

基础概念

Canvas元素：HTML5中新增的一个元素，用于在网页上绘制图形。
Canvas API：一组JavaScript API，用于在Canvas元素上进行绘图操作。
2D绘图上下文：Canvas API提供了一个2D绘图环境，可以通过getContext('2d')方法获取。

类型

路径：包括线条、矩形、圆形等。
文本：可以在图片上添加文字。
图像：可以将其他图片绘制到Canvas上。
渐变和模式：可以创建渐变色和图案。

应用场景

图片编辑：在图片上添加标注、文字、图形等。
游戏开发：绘制游戏角色、背景、动画等。
数据可视化：绘制图表、图形等。

示例代码

以下是一个简单的示例，展示如何在图片上绘制一个矩形和一段文字：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Example</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        // 获取Canvas元素和2D绘图上下文
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 加载图片
        const img = new Image();
        img.src = 'path/to/your/image.jpg';
        img.onload = () => {
            // 绘制图片
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

            // 设置绘图样式
            ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 2;

            // 绘制矩形
            ctx.strokeRect(50, 50, 200, 100);
            ctx.fillRect(50, 50, 200, 100);

            // 设置文字样式
            ctx.fillStyle = 'black';
            ctx.font = '30px Arial';
            ctx.textAlign = 'center';

            // 绘制文字
            ctx.fillText('Hello, World!', canvas.width / 2, canvas.height - 20);
        };
    </script>
</body>
</html>