html5canvas

作者：罚尘封魔发布日期:2025-06-06 浏览:11

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Canvas Example</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
    <script>
        // 获取 canvas 元素
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 绘制矩形
        // fillRect(x, y, width, height)
        ctx.fillStyle = 'green';  // 设置填充颜色为绿色
        ctx.fillRect(50, 50, 200, 100);  // 绘制一个填充的矩形

        // 绘制圆形
        // arc(x, y, radius, startAngle, endAngle, anticlockwise)
        ctx.beginPath();
        ctx.arc(350, 150, 50, 0, Math.PI * 2, false);  // 绘制一个圆
        ctx.fillStyle = 'blue';  // 设置填充颜色为蓝色
        ctx.fill();  // 填充圆形

        // 绘制线条
        ctx.beginPath();
        ctx.moveTo(50, 250);  // 移动到起点坐标
        ctx.lineTo(450, 250);  // 绘制到终点坐标
        ctx.strokeStyle = 'red';  // 设置线条颜色为红色
        ctx.lineWidth = 5;  // 设置线条宽度
        ctx.stroke();  // 绘制线条

        // 添加文本
        ctx.font = '30px Arial';  // 设置字体样式
        ctx.fillStyle = 'black';  // 设置文本颜色为黑色
        ctx.fillText('Hello HTML5 Canvas!', 50, 400);  // 在指定位置绘制文本
    </script>
</body>
</html>

解释说明：

Canvas 元素：<canvas> 标签用于在网页上绘制图形。它本身是一个空白的绘图区域，需要通过 JavaScript 来进行绘制。
获取上下文：getContext('2d') 方法返回一个用于绘制 2D 图形的上下文对象。
绘制矩形：使用 fillRect(x, y, width, height) 方法绘制一个填充矩形，并通过 fillStyle 设置矩形的颜色。
绘制圆形：使用 arc(x, y, radius, startAngle, endAngle, anticlockwise) 方法绘制一个圆弧或圆形，并通过 fill() 方法填充。
绘制线条：使用 moveTo(x, y) 和 lineTo(x, y) 方法定义线条的起点和终点，然后通过 stroke() 方法绘制线条，strokeStyle 和 lineWidth 分别设置线条的颜色和宽度。
添加文本：使用 fillText(text, x, y) 方法在指定位置绘制文本，并通过 font 和 fillStyle 设置文本的样式和颜色。

上一篇：html 隐藏div

下一篇：自适应html5单页模板