# Canvas基础 `HTML5`中引入``标签，用于图形的绘制，``为图形的绘制提供了画布，是图形容器，具体的图形绘制由`JavaScript`来完成。 ## 实例 ```html Canvas ``` ## CANVAS与SVG ### svg * 不依赖分辨率。 * 支持事件处理器。 * 不适合游戏应用。 * `SVG`是使用`XML`来描述图形。 * 最合适带有大型渲染区域的应用程序，如谷歌地图等。 * 复杂度高会减慢渲染的速度，任何过度使用`DOM`的应用都不快。 * 以单个文件的形式独立存在，后缀名`.svg`，可以直接在`html`中引入。 * `SVG`是基于`XML`的，这也就是说`SVG DOM`中的每个元素都是可用的，可以为某个元素附加`JavaScript`事件处理器。 * 在`SVG`中，每个被绘制过的图形均视为对象，如果`SVG`对象的属性发生变化，那么浏览器可以自行重现图形。 ### canvas * 依赖分辨率。 * 文本渲染力弱。 * 不支持事件处理器。 * `Canvas`是逐像素进行渲染的。 * `Canvas`是通过`JavaScript`来绘制图形。 * 能够以`.png`或`.jpg`的格式保存结果图形。 * 最合适图像密集型的游戏，其中许多的对象会被频繁的重绘。 * `Canvas`中一旦图形被绘制完成，他就不会继续得到浏览器的关注，如果他的位置发生变化，那么就需要重新来绘制图形，其中包括任何或已经被图形覆盖的对象。 ## 每日一题 ``` https://github.com/WindrunnerMax/EveryDay ``` ## 参考 ``` https://www.runoob.com/tags/ref-canvas.html https://www.runoob.com/w3cnote/html5-canvas-intro.html ```