HTML5 Canvas绘制图形从入门到精通

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




<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Canvas 入门示例</title>
    <script>
        function draw() {
            // 获取canvas元素
            var canvas = document.getElementById('myCanvas');
            // 创建context对象
            var ctx = canvas.getContext('2d');
 
            // 开始绘制路径
            ctx.beginPath();
            // 设置线宽
            ctx.lineWidth = 3;
            // 设置线的颜色
            ctx.strokeStyle = '#333333';
            // 设置填充颜色
            ctx.fillStyle = '#33cc33';
 
            // 绘制一个矩形
            ctx.rect(25, 25, 150, 100);
            // 填充矩形
            ctx.fill();
            // 绘制矩形边框
            ctx.stroke();
 
            // 在矩形内部绘制文本
            ctx.fillStyle = 'white';
            ctx.font = '20px Arial';
            ctx.fillText('Hello, World!', 40, 70);
        }
    </script>
</head>
<body onload="draw();">
    <canvas id="myCanvas" width="200" height="150"></canvas>
</body>
</html>

这段代码演示了如何在HTML5页面上使用Canvas绘制一个矩形，并在其中填充文本。它提供了一个简单的入门示例，展示了如何使用JavaScript和HTML5 Canvas API进行基本的图形绘制。

HTML5 Canvas绘制图形从入门到精通

评论已关闭

推荐阅读