HTML5福利篇--使用Canvas画图

作者：System 时间：2024年08月23日分类：所有,html5 字数：1202




<!DOCTYPE html>
<html>
<head>
    <title>Canvas 画图示例</title>
    <script>
        function draw() {
            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');
 
            // 绘制线条
            ctx.beginPath();
            ctx.moveTo(20, 20);
            ctx.lineTo(200, 20);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'blue';
            ctx.stroke();
 
            // 绘制矩形
            ctx.beginPath();
            ctx.rect(50, 70, 150, 100);
            ctx.fillStyle = 'green';
            ctx.fill();
            ctx.lineWidth = 3;
            ctx.strokeStyle = 'black';
            ctx.stroke();
 
            // 绘制文字
            ctx.font = '20px Arial';
            ctx.fillStyle = 'red';
            ctx.fillText('Hello, World!', 100, 150);
        }
    </script>
</head>
<body onload="draw();">
    <canvas id="myCanvas" width="400" height="300" style="border:1px solid #000000;"></canvas>
</body>
</html>

这段代码在页面加载完成时调用draw函数，该函数获取页面上的<canvas>元素，并通过getContext('2d')获取2D绘图上下文。然后，它使用beginPath、moveTo、lineTo等方法绘制线条，使用rect、fill、stroke等方法绘制矩形和填充文字。这个例子展示了如何使用Canvas API进行基本的图形绘制。

HTML5福利篇--使用Canvas画图

评论已关闭

推荐阅读