标签：class   style   代码   html   src   问题   使用   方法   

周老虎落网的时候，网易跟腾讯都推出了牛逼轰轰的HTML5页面来展示其关系网（网易  ，腾讯），查看这俩页面，都是通过H5中canvas强大的绘图功能来实现的。如果你未曾学习过H5，看完这俩屌炸天的页面，兴许会勾起你学习的欲望。

canvas其实没有那么玄乎，它不外乎是一个H5的标签，跟其它HTML标签如出一辙：

canvas本身没有任何的绘图能力，所有的绘图工作都是通过js来实现的。通常我们在js通过getElementById来获取要操作的canvas（这意味着咱得给canvas设个id）：

var c //

注意最好在一开始的时候就给canvas设置好其宽高（若不设定宽高，浏览器会默认设置canvas大小为宽300、高100像素），而且不能使用css来设置（会被拉伸），建议直接写于canvas标签内部：

也可以在js脚本中设置：

); c.width=200; c.height=200;

关于canvas大小需要知道的一点是，后续咱们对canvas所做的全部绘图操作，超出此大小范围的部分是不可见的。顾名思义，可以把canvas看成一块画布，其大小是咱设定好的宽高，那么无论你怎么画，画布外的地方自然是画不到的。

对于有些浏览器是不支持canvas功能的，我们可以直接在canvas标签中写一些替换内容，在浏览器不支持canvas时显示：

您的浏览器不支持canvas，建议使用最新版的Chrome

接着在聊如何在canvas上绘图前，咱得先说说.getContext("2d")这东西。
.getContext() 是canvas的绘图对象/方法，要让canvas执行绘图工作必须先获取canvas的.getContext()对象来执行。

.getContext()只接受一个参数，该参数用于获取canvas的绘图环境，例如.getContext("2d")表示该canvas的绘图环境为2D平面（可以绘制文本、直线、弧线、矩形、圆形等）。当前H5只支持2D环境，在不久的将来会开放3D绘图功能。（故咱可将“getContext”翻译为“获取绘图环境”）

理论不多说，我们先来个小例子，从最简单的绘制直线开始：

<canvas> 您的浏览器不支持canvas，建议使用最新版的Chrome </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象 ctx.moveTo(10,10); //定义绘画开始的位置 ctx.lineTo(150,50); //画一条直线，结束点坐标是x=150,y=50 ctx.stroke(); //描边 </script>

效果如下：

在这里我们使用了3个getContext("2d")对象的绘图方法：

.moveTo(x坐标 , y坐标)      可以理解为定位画笔在画布上的位置（注意所有绘图方法所定义的坐标是相对canvas而言的而不是浏览器窗口，对canvas来说，最左上角的点的坐标是(0,0)）

.lineTo(x坐标 , y坐标)      顾名思义，就是画一条直线到某个点，很好理解。需要知道的是此方法仅仅做路径运动，而不存在任何视觉上的绘图效果（上色、描边）

.stroke()     描边方法，有玩过AfterEffect的朋友会很清楚，不给运动路径加stroke特效的画是不存在描边效果的，canvas也一样，想要运动路径轨迹能有视觉效果，需要使用相应的上色/描边方法

自此我们很轻松地绘制了一条黑色的直线，但如果我们想要绘制一条红色的或者其它颜色的线段，该怎么做呢？

答案很简单，使用ctx.strokeStyle来设定描边的颜色即可。我们画三条红色的线段吧：

您的浏览器不支持canvas，建议使用最新版的Chrome );

注释都说的很清楚了，故不再赘述实现原理，其效果如下：

注意在开始绘制路径的时候，一定要加上moveTo(x,y)，否则第一个lineTo()的运动轨迹将不计入绘图中（浏览器会认为没获取到该运动轨迹的起始点，故忽略此线段）。

另外有一个问题，如果上方我们会出来的两条线段（嗯，一条折线，一条直线），我们希望第一条折线是蓝色的，第二条直线是红色的，应当怎么做？

你会地很自然地做如下处理：

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(150,50); ctx.lineTo(20,100); ctx.strokeStyle = "blue"; //设定描边颜色为蓝色 ctx.stroke(); ctx.moveTo(90,90); ctx.lineTo(80,150); ctx.strokeStyle = "red"; //设定描边颜色为红色 ctx.stroke(); </script>

但运行脚本会发现，折线除了被描了一遍蓝色，也被描了一遍红色：

这是因为canvas在第二次给路径上色时，是把之前的所有路径轨迹合在一起来上色的，除非咱们让canvas知道那折线和直线应该是独立开来的俩路径。

我们可以使用.beginPath()来解决：

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(150,50); ctx.lineTo(20,100); ctx.strokeStyle = "blue"; //设定描边颜色为蓝色 ctx.stroke(); ctx.beginPath(); //告诉canvas咱们要重新绘制一条全新的路径了，之前画的东西从此再无关系 ctx.moveTo(90,90); ctx.lineTo(80,150); ctx.strokeStyle = "red"; //设定描边颜色为红色 ctx.stroke(); </script>

有的朋友一开始会搞不清楚beginPath()的用途，觉得有moveTo()就可以了，其实beginPath()可以做到上述的隔离路径绘制效果的作用，防止之前的效果被污染。

接着唠嗑.strokeStyle的赋值方式，咱们上方是直接用了 ctx.strokeStyle="red" 来定义描边颜色为红色，不过ctx.strokeStyle可获值的形式有三种：

ctx.strokeStyle=color|gradient|pattern; //即支持 “颜色/渐变/图案笔刷” 的赋值

⑴ 先看看color赋值方式，和我们常规的css赋值是一样的，支持，如下例：