编程笔记 html5&css&js 032 HTML Canvas

编程笔记 html5&css&js 032 HTMLCanvas

[一、什么是 HTML Canvas？](#一、什么是 HTML Canvas？)
[二、HTML Canvas 可以绘制文本](#二、HTML Canvas 可以绘制文本)
[三、HTML Canvas 可以绘制图形](#三、HTML Canvas 可以绘制图形)
[四、HTML Canvas 可以动画化](#四、HTML Canvas 可以动画化)
[五、HTML Canvas 可以交互](#五、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 游戏应用程序提供了很多可能性。

html 复制代码

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

<canvas> 元素必须有 id 属性，以便 JavaScript 可以引用它。

width 和 height 属性对于定义画布的大小也是必需的。

提示：一张 HTML 页面上可以有多个元素。

默认情况下，元素没有边框，也没有内容。

如需添加边框，请使用 style 属性：

练习

html 复制代码

<!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>

小结

暂时用不到，再说吧。