编程笔记 html5&css&js 032 HTML Canvas-Toy模板网

这篇具有很好参考价值的文章主要介绍了编程笔记 html5&css&js 032 HTML Canvas。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Canvas画布，就是可以用来画画的地方，不是用户在浏览器上画图，而是会javascript画图。这区别于直接载入一张图片，是可以根据需要进行绘制。

一、什么是 HTML Canvas？

HTML <canvas> 元素用于通过脚本（通常是 JavaScript）动态地绘制图形。
<canvas> 元素只是图形的容器。您必须使用脚本来绘制实际的图形。
Canvas 有多种方法用于绘制路径、方框、圆形、文本和添加图像。

二、HTML Canvas 可以绘制文本

Canvas 可以绘制彩色文本，还可带动画效果。

三、HTML Canvas 可以绘制图形

Canvas 拥有使用图形和图表进行图形化数据呈现的强大能力。

四、HTML Canvas 可以动画化

Canvas 对象可以移动。一切皆有可能：从简单的弹跳球到复杂的动画。

五、HTML Canvas 可以交互

Canvas 可以响应 JavaScript 事件。
Canvas 可以响应任何用户操作（按键单击、鼠标单击、按钮单击、手指移动）。
HTML Canvas 可用于游戏
Canvas 的动画方法为 HTML 游戏应用程序提供了很多可能性。

<canvas id="myCanvas" width="200" height="100"></canvas>

<canvas> 元素必须有 id 属性，以便 JavaScript 可以引用它。
width 和 height 属性对于定义画布的大小也是必需的。
提示：一张 HTML 页面上可以有多个元素。
默认情况下，元素没有边框，也没有内容。
如需添加边框，请使用 style 属性：

练习

<!DOCTYPE html>
<html lang="zh-cn">
    <title>编程笔记 html5&css&js HTML Canvas</title>
    <meta charset="utf-8" />
    <style>
        body {
            color: cyan;
            background-color: teal;
        }
        .container {
            width: 500px; /* 设置容器的宽度 */
            margin: 0 auto; /* 将左右边距设置为自动 */
            line-height: 2;
        }
    </style>
    <body>
        <div class="container">
            <h1>这是一个 canvas</h1>
            <canvas
                id="myCanvas"
                width="500"
                height="500"
                style="border: 1px solid #000000"
            ></canvas>
        </div>
        <script>
            const canvas = document.getElementById("myCanvas");
            const ctx = canvas.getContext("2d");
            ctx.beginPath();
            ctx.rect(100, 100, 300, 300);
            ctx.stroke();
            ctx.fillStyle = "#00FF00";
            ctx.fillRect(150, 150, 200, 200);
        </script>
    </body>
</html>