canvas html

作者：狂战天下发布日期:2026-04-11 浏览:43

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Example</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>

    <script>
        // 获取 canvas 元素
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        // 绘制矩形
        ctx.fillStyle = "#FF0000"; // 设置填充颜色为红色
        ctx.fillRect(0, 0, 150, 75); // 绘制一个填充的矩形

        // 绘制圆形
        ctx.beginPath();
        ctx.arc(240, 188, 40, 0, 2 * Math.PI);
        ctx.fillStyle = "green"; // 设置填充颜色为绿色
        ctx.fill(); // 填充圆形
        ctx.closePath();

        // 绘制文本
        ctx.font = "30px Arial"; // 设置字体大小和类型
        ctx.fillStyle = "blue"; // 设置文本颜色为蓝色
        ctx.fillText("Hello World", 300, 50); // 在指定位置绘制文本
    </script>
</body>
</html>

解释说明：

HTML 结构：我们定义了一个 canvas 元素，设置了宽度和高度，并添加了一些样式。
JavaScript：通过 JavaScript 获取 canvas 元素并使用其上下文 (getContext("2d")) 来绘制图形。
绘制矩形：使用 fillRect 方法绘制一个红色的矩形。
绘制圆形：使用 arc 方法绘制一个绿色的圆形。
绘制文本：使用 fillText 方法在画布上绘制蓝色的文字 "Hello World"。

如果你需要更复杂的绘图功能，可以进一步探索 canvas API。

上一篇：html 单选框

下一篇：html 下拉框