HTML5 canvas 基础

最近在学习和开发canvas的东西，从这篇博客开始我会持续更新canvas技术的文章。

一．什么是canvas

Canvas是html5新标准引进的一个标签。这个标签和技术主要用于开发动画，视频，图像，游戏，等等，一切媒体资源似乎都有canvas的身影。
Canvas翻译过来叫做“画布”，这个用词还是比较贴切的。因为canvas本身就像油画的画布一样。试想一下，画布是什么？承载一幅画的载体。Canvas的作用就是这样的。一切的图形，图像，都在canvas上显示。但是，一幅油画的画布具备绘画能力吗？并不具备。Canvas也是如此。Canvas本身不具备绘画能力，canvas只是提供一块区域。具体的绘制功能由canvas的CanvasRenderingContext2D（方便起见，后面就说Context）对象管理。我们可以通过：

//获取context对象var canvas = document.getElementById('canvas'),context = canvas.getContext('2d');

canvas对象就像画布，context对象就像绘画工具，包括画笔，橡皮等等你可能在绘画时用到的工具。
所以，一定要弄清楚的是，我们绘制图像时，始终在操作context对象，而不是canvas，canvas只负责显示，并没有别的很神奇的功能。真正强大的是context对象。

二．canvas常识

1）canvas是一种立即模式的绘图系统。也就是说，canvas会直接显示你所指定的绘画内容，然后立刻忘掉，这意味着，加入你画一个矩形，你觉得它太过瘦长，你不能通过拖动的方式让他变形，因为你所绘制的图形并不被canvas以对象的形式管理，而是直接忘记。（但是我们可以通过一些技术手动管理）另一种绘画系统是保留模式。保留模式会维护一份你所绘制的图形的对象列表。

2）canvas中不能嵌入其他html标签，嵌入canvas标签中的html只会在浏览器无法显示canvas时出现，如果想把canvas和其他html标签组合使用，只能将canvas放在内层。

3）canvas的context对象维护着一个绘图环境。例如，绘制线条的宽度（lineWidth），绘制路径描边的样式（strokeStyle），绘制路径填充的样式（fillStyle）阴影颜色（shadowColor）等等属性。这些属性都是全局的。也就是说，如果你改变了这些属性的值，那么后面所有的绘制将会一直使用你所赋予的新值，直到你重新赋值。听起来很方便，但是，当你代码变得冗长的时候，你会很烦这些轻易就能改，又能影响深远的属性。所以，canvas（其实大多数语言的绘图系统都有）提供了一组方法：

context.save();//更新你的绘图环境属性context.restore();//context指通过canvas.getContext(‘2d’)拿到的CanvasRenderingContext2D对象

canvas.save()方法可以保存当前的绘图环境对象，canvas.restore()可以释放上一次保存的绘图环境对象。也就是说，save和restore之中，你对context的更改并不会影响全局的属性，因为再更改之前你已经保存了全局的context，并在使用完之后restore了。所以，我们应该尽可能的在这组方法中更改绘图环境，以免影响全局环境。并且这两个方法可以嵌套使用。

4）之前说过，canvas强大的是他的绘图环境context。canvas本身功能有限，只有两个属性

canvas.width          //canvas绘图表面的宽度，默认300pxcanvas.height        //canvas绘图表面的高度，默认150px

什么是绘图表面？字面意思，绘图的地方。也就是说canvas实际显示的区域（可以将body设置background-color:#cdcdcd; 给canvas 设置 background-color:#fff;）

为什么要强调绘图表面，是为了区分canvas本身的大小。canvas的css样式中还有两个属性：

canvas.style.width       //canvas本身宽度，在css中设置的就是这个值canvas.style.height     // 

如果你html行内修改width和height属性，那么会连带style.width和style.height一起修改，如果你单独修改style，那么是不会同步width的。

这样做有什么后果呢？

canvas如果style的大小和绘图表面大小不一致，canvas会强制绘图表面缩放使得符合元素大小。

假如说，canvas没有设置width，height，那么就是默认的300px和150px，此时，我在样式表中设置:

canvas.style.width = 600;canvas.style.height = 300;

那么实际绘图的图像大小会放大到适应600px的区域，即你本来绘画的大小的两倍。

如图：

可以想象成相框或者取景器。
如果觉得canvas的像素不够的话，想显示高像素，可以试试用图中相反的方法，让画面缩小。（windows上canvas自身绘制斜线会有轻微像素感）。

5）坐标系统

如果已经开始尝试canvas两组大小属性不一样的设置，这会影响你的坐标，因为，当你鼠标点击时，浏览器捕捉到的是你鼠标相对于浏览器的坐标：

event.clientX;          event.clientY;       

你通过:

var bcr = canvas.getBoundingClientRect();     

拿到的是canvas边界框对象，这个对象管理的属性包括边界框大小和相对于浏览器的偏移。

当你的canvas坐标系统与绘图表面的坐标可能不一致时，你可以通过这样一个方法:

function windowToCanvas(x, y) {   var bbox = canvas.getBoundingClientRect();   return { x: x - bbox.left * (canvas.width  / bbox.width),            y: y - bbox.top  * (canvas.height / bbox.height)          };}

该方法接受一个canvas对象，和你需要转换的坐标值。brc.left 和brc.top 保存偏移量，brc.width 和brc.height 保存大小，该方法返回一个坐标对象，保存着已经通过缩放计算的实际坐标。

当你不希望你的canvas莫名其妙的大小不一致时，可以使用这个方法屏蔽两组坐标的差异

（注：如果你是想通过缩小图像来达到提高像素的目的，那么就不要用这个方法，因为他会屏蔽掉你的坐标系统差异，而你刚好是想使用这个差异）

基础的canvas需要注意的事情就是这些，后面会更新一些canvas具体绘制的技术

By DoubleJan
2017-07-10