前端开发技术点总结（五）：Canvas使用总结

一开始接触html5的Canvas是觉得新奇的，然而之后的心路历程是这样的：感觉挺有意思的！靠，什么东西好难用！线条和圆圈怎么会画成这样！哦，原来是这样啊！嗯，挺好用，有意思……

折腾了两天，终于基本上手Canvas了，画起东西来还是很有意思的，大家可以试着上手一下，虽然心路历程可能差不多，微笑脸。

以我的经历来看，大多数的人可能会觉得难的点在于：两点之间怎么画线？连续的点怎么连接地画出来？圆圈或者其他图形结合线条怎么连续着画……

以上问题一一解答。

首先应该准备的语法点或者技术点先列出来，我一直喜欢一个朋友说的一句话：要用到的技术点或者知识点有了，剩下的就是实现逻辑和敲代码的事了。

Canvas的定义

Canvas的大众解释是：html5新增的标签，实现一块画布（Canvas），你可以在上面画图形、图像等等，由标签对<canvas></canvas>给出定义，至于“画”这个动作要用JavaScript代码脚本去实现。实际上想想也是，标签或者元素毕竟只是用来实现静态页面部分，动作还是得用js代码实现，这个思想对整个前端开发都是一样的。

Canvas的实现

和其他标签一样，使用一对标签<canvas></canvas>创建画布标签，一般会给出它的宽度和高度，像这样：

<canvas id="myCanvas" width="200" height="100"></canvas>

但是实际上后面我还会用到一张图片作为这块画布的背景，所以一般定义时我没有给出宽高。

Canvas使用的逻辑

1、通过getElementById()方法获取画布标签的id，去定义和初始化一个画布对象：

var myCanvas=document.getElementById("你定义的canvas的id");

2、用定义的画布对象创建上下文对象，这个对象你可以理解为“画笔”：

var context=my