canvas 圆角矩形填充_Canvas技术概述

Canvas简介

在学习一项新技术之前，先了解这项技术的历史发展及成因会帮助我们更深刻的理解这项技术。

历史上，canvas最早是由Apple Inc. 提出的，在Mac OS X webkit中创建控制板组件使用，而在canvas称为HTML草案及标准之前，我们是通过一些替代方式去绘图的，比如为人所诟病的Flash，以及非常强大的SVG(Scalable Vector Graphics，可伸缩的矢量标记图)，还有只能在IE(IE 5.0以上的版本)中使用的VML(Vector Markup Language，矢量可标记图)。甚至于有些前端可以使用div+css来完成绘图。

总的来说，没有canvas的时候，在浏览器绘制图形是比较复杂的，而在canvas出现之后，绘制2D图形相对变得容易了。

NOTE： 用div绘制一些简单的图形，如矩形，圆形，三角形，梯形，倒也算是没那么复杂。

但canvas也有缺点。因为canvas本质上是一个与 分辨率相关 的 位图画布 ，也就注定了在不同分辨率下，canvas绘制的内容显示的时候会有所不同。此外，canvas绘制的内容 不属于任何DOM元素 ，在浏览器的元素查看器中也找不到，那自然无法检测鼠标点击了canvas中的哪个内容，很显然，这两方面，canvas都是不如SVG的。

举个例子：如果使用CSS设置canvas元素的尺寸，那可能会导致绘制出来的图形变得扭曲，如长方形变正方形，圆形变椭圆等，这是因为画布尺寸和元素尺寸是不一样的，画布会自动适应元素的尺寸，如果二者是成比例的，那么画布就会等比例缩放，不会出现扭曲。

这么说来，canvas有这么明显的缺点，那直接使用SVG岂不是更好？

No，听过一句话吗？没有完美的方案，只有适不适合。

SVG是基于XML的，那么就说明，SVG里面的元素都可以认为是 DOM元素 ，可以启用DOM操作，同时，SVG中每个绘制的图像均被视为对象，若SVG对象属性变化，浏览器会自动重现图形。

以上是SVG的优势，但通过这个优势，我们也能发现一些问题：

1. 通常，过度使用DOM的应用都会变得很慢，所以，复杂的SVG会导致渲染速度变慢。但是像地图这类的应用，首选是SVG。
2. 浏览器的重排发生在浏览器窗口发生变化，元素尺寸位置变化，字体变化等等。
3. 即使可以启用DOM操作，但DOM操作的代价还是比较昂贵的(DOM和JS的实现是分开的)。

回到主题。

canvas是通过JavaScript进行2D图形的绘制，而 标签本身是没有任何绘制能力的，它仅仅是一个容器。在绘制时，canvas是逐像素的进行渲染的，一旦图形绘制完成，该元素就不再被浏览器所关注(脚本执行结束，绘制的图形也不属于DOM)。

值得注意的是，在HTML标准( whatwg标准 )中明确的指出： Authors should not use the canvas element in a document when a more suitable element is available. 所以，不要滥用元素。

canvas目前几乎被所有的浏览器支持，但是IE 9.0 之前的版本不支持 canvas 元素

canvas基本使用

canvas是一个HTML元素，所以要使用canvas，首先需要：

当前浏览器不支持canvas

在第一行HTML代码中可以看到两个属性： width 和 height ，