canvas绘图详解笔记（一）

声明一下：这里我不会用太多文字去详解介绍canvas是什么，相信了解过canvas的人都知道它的魅力所在，如果你对canvas还比较陌生的话，建议可以查阅相关资料了解一下。这里我将对canvas绘图详解课程做一次详细的笔记，方便大家和自己日后可以学习。那么接下来就是直接进入笔记内容的学习：

首先创建一个canvas元素，我们只需要在html文件中加入这么一句代码：

%26lt;canvas id="canvas"%26gt;当前浏览器不支持canvas，请更换浏览器使用！%26lt;/canvas%26gt;

同时我们也可以通过canvas的标签属性width和height设置canvas画布的大小：

%26lt;canvas id="canvas" width="800" height="800"%26gt;当前浏览器不支持canvas，请更换浏览器使用！%26lt;/canvas%26gt;

当然，我们也可以通过js来设置canvas的宽高，下文会提到如何设置。

接下来我们就在js中获取到该canvas元素，然后设置它的宽高，并获取到上下文的环境：

var canvas = document.getElementById("canvas");//获取到canvas元素
//设置宽高
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");//获取上下文的环境

接下来我们的所有操作都是基于这个context的上下文环境。

现在画一条简单的直线：

context.moveTo(100,100);
context.lineTo(500,500);

moveTo()方法表示一次绘制的起点坐标，lineTo()表示基于上一个坐标点到这个坐标点之间的直线连接。

注意的是，canvas是基于状态的绘制，而不是基于对象的绘制。所以，上面代码都是状态的设置，我们还需要使用stroke()方法进行绘制：

context.stroke();//绘制

除此之外，我们还可以设置线条的一些基本属性：

context.lineWidth = 8;//线条的宽度
context.strokeStyle = "#333";//线条的颜色

一个简单的绘制一条直线的完整例子：

var canvas = document.getElementById("canvas");//获取到canvas元素
//设置宽高
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");//获取上下文的环境
//canvas 是基于状态的绘制，而不是对象
context.moveTo(100,100);
context.lineTo(500