编程笔记 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>

小结

暂时用不到,再说吧。

相关推荐
Smile_Gently1 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1236 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
shengmeshi8 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu8 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉8 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj8 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
Json____9 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站
*TQK*9 小时前
✨1.HTML、CSS 和 JavaScript 是什么?
前端·javascript·css·html