We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

<canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画. 右边的图片展示了一些 <canvas> 的实现示例,在这个教程后面我们将看到.

本篇教程描述了如何使用从一些基础开始,用<canvas>元素来绘制2D图形。教程中提供的例子,会让你明白你可以用canvas做什么,也会提供一些代码片段来帮助你开始构建自己的内容。

<canvas> 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,随后被各个浏览器实现。如今,所有主流的浏览器都支持它。

开始之前

使用 <canvas> 元素不是非常难但你需要一些基本的HTMLJavaScript知识。<canvas> 元素不被一些老的浏览器所支持,但是所有的主流浏览器的新近版本都支持。Canvas 的默认大小为300像素×150像素(宽×高,像素的单位是px)。但是,可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。为了在 Canvas 上绘制图形,我们使用一个JavaScript上下文对象,它能动态创建图像( creates graphics on the fly)。

本教程包含

相关链接

文档标签和贡献者

此页面的贡献者: jianxin-zhang, Oraice, wth, AzureRay, Jeery, xgqfrms, Ende93, ziyunfei, xcffl, arz, fiftyk
最后编辑者: jianxin-zhang,