HTML5标签--Canvas基础（1）：

新手小白web

已于 2022-06-15 09:07:32 修改

阅读量1k

点赞数

分类专栏：前端 script html 文章标签： safari javascript firefox

于 2022-06-14 21:50:14 首次发布

本文链接：https://blog.csdn.net/qq_51874203/article/details/125285255

版权

本文介绍了HTML5中的Canvas标签，用于在网页上动态生成图像。Canvas提供了CanvasRenderingContext2D对象，通过JavaScript进行图形绘制，包括路径、矩形、弧线和文字。虽然不支持IE8及以下版本，但现代浏览器广泛支持。Canvas的基本语法、属性如id、width和height以及一些关键函数被详细阐述。

摘要由CSDN通过智能技术生成

一：什么是Canvas？

canvas（HTML5新增标签）Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。

Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

二：定义和方法(简述)

在html中，<canvas>标签是使用来规定一个图形容器（画布），然后通过脚本（ JavaScript等）来绘制图形，比如：绘制路径、盒、圆、字符以及添加图像等。

<canvas>标签默认没有边框和内容，如果不使用脚本来绘制图形，它本身是没有任何效果的，所以它必须和脚本配合使用来绘制图形。

Canvas可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通CanvasRenderingContext2D 对象获得。这是通过 Canvas 对象的getContext() 方法并且把直接量字符串 "2d" 作为唯一的参数传递给它而获得的。

（CanvasRenderingContext2D 对象提供了一组用来在画布上绘制的图形函数）

<canvas> 标记在 Safari 1.3 中引入，在制作此参考页时，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，<canvas> 标记及其 API 可以使用位于excanvas点sourceforge点net的 ExplorerCanvas 开源项目来模拟。

综述：canvas是HTML5重要元素，不需要外部插件支持，提供了强大的图形处理功能，常用于移动端web的开发，基本现代浏览器都支持，IE8以下不支持，进行绘制，是通过context环境进行操作的（坐标系：横轴向右为正，纵轴向下为正）。