Canvas目前是比较流行用于在网页中通过Javascript脚本语言绘制图形的元素。
在应用方面，包括很多小游戏的制作，动画的实现，基础图形以及文字的绘制等。
下面通过小示例来学习通过canvas进行简单的绘图，
首先我们需要定义一个canvas标签，定义的方法很简单：
<canvas id="canvas" width="1024" height="768"></canvas>
一. canvas的宽高定义
1.这里我建议的写法是这样，或者采用在js中通过 canvas.width = "1024" canvas.height = "768"的形式赋值，需要注意的是 width 和 height 是没有单位的，不需要添加px。
2. 可能有的同学会提出来可不可以通过CSS样式的方式添加 width 和 height 。在这里喔也是不建议的。因为通过Css形式添加 width 和 height 会有可能导致图形拉伸变形。以下通过一个对比图来说明：
通过 canvas的 width , height 属性添加宽高，以（10，10）为原点，绘制300*300正方形图形，效果为正常：
同样的图形，通过CSS样式添加宽高：
为什么会有这样的差异呢？之前看到过一个比喻觉得很恰当，我们可以把 canvas 元素看作一个画板和画布的结合，通过后台浏览器调试模式我们可以知道 canvas 的默认大小是300*150，当我们通过 canvas 的属性 height , width 来设置大小相当于将画板与画布的大小同时固定，而通过 CSS 设置只能改变画板的大小，画布的大小永远是它默认300*150。
二 .canvas的坐标系
canvas的坐标原点永远在图形左上角位置，以水平向右为x轴正方向，以垂直向下为y轴正方向。
如下图：
三 . 绘制简单图形
1.直线形几何图形
代码加备注：
var canvas = document.getElementById('canvas'); /*获取定义canvas的Dom对象*/ var context = canvas.getContext("2d"); /*获得canvas2D对象*/ context.beginPath(); /*定义开始绘图*/ context.moveTo(10,10); /*定义起点*/ context.lineTo(10,200); /*定义路线*/ context.lineTo(200,200); context.lineTo(200,10); context.lineTo(10,10); context.lineWidth = 5; /*定义线条宽度*/ context.strokeStyle = "#3f51b5"; /*定义线条颜色*/ context.stroke(); /*绘制线条*/ context.closePath();注：lineTo()的参数为坐标点，多个lineTo函数会默认首位连接 的次序绘制图形。
2.直线形几何图形的填充
代码加备注：
var canvas = document.getElementById('canvas'); /*获取定义canvas的Dom对象*/ var context = canvas.getContext("2d"); /*获得canvas2D对象*/ context.beginPath(); /*定义开始绘图*/ context.moveTo(10,10); /*定义起点*/ context.lineTo(10,200); /*定义路线*/ context.lineTo(200,200); context.lineTo(200,10); context.lineTo(10,10); context.lineWidth = 5; /*定义线条宽度*/ context.fillStyle= "rgb(2,100,30)"; /*填充的颜色*/ context.fill(); /*填充方法*/ context.closePath();注：stroke()为连接图形点，形成图形线条，fill()为填充图形。
3.弧形图形
定义弧形图形我们会用到arc()方法
这里我们需要确定arc()方法起始点位置，当我们画一个圆形，他的起始点位置就是3点钟方向。
起点示例图（已经不想再画了，从W3C上拉了一张示意图）：
现在让我们用arc函数画一个圆形：
代码加备注：
var canvas = document.getElementById('canvas'); /*获取定义canvas的Dom对象*/ var context = canvas.getContext("2d"); /*获得canvas2D对象*/ context.beginPath(); context.strokeStyle = "#3c3c3c"; context.lineWidth = 5; context.arc( 150,120,60,0,2*Math.PI,false); context.stroke(); context.closePath(); 注：<1>.arc()函数中有6个参数，分别是X轴坐标点，Y轴坐标点，半径，开始角度（以弧度计），结束角度（以弧度计），是否为逆时针（False为逆时针，true为顺时针）。
<2>.弧线形图形填充和之前讲的是一样的，通过定义fillStyle，fill()函数实现。
4.文字
代码加备注：
var fonttest=document.getElementById("canvas"); var ctx=fonttest.getContext("2d"); ctx.strokeText("this is a test!",10,50); /*this is a text定义*/ ctx.font="20px Georgia"; /*字号字体*/ var gradient=ctx.createLinearGradient(0,0,fonttest.width,0); /*创建渐变*/ ctx.font="30px Verdana";/*字号字体*/ gradient.addColorStop("0","#6666FF"); /*定义渐变颜色*/ gradient.addColorStop("0.5","green"); /*定义渐变颜色*/ gradient.addColorStop("1.0","red"); /*定义渐变颜色*/ ctx.strokeStyle=gradient; /*用定义的渐变进行填色*/ ctx.strokeText("Hellow every body!",10,90); /*Hellow every body定义显示*/
四. 兼容性
这是caniuse.com上对canvas兼容性的统计：
五. 常用方法整理
1. begainPath() 路径开始。
2. moveTo() 定义起点位置。
3. lineTo() 连接坐标点，下一位置点坐标。
4. fillStyle() 填充颜色。
5. fill() 对图形填充颜色。
6. lineWidth() 线条宽度。
7. strokeStyle() 图形连接线条颜色。
8. stroke() 图形线条连接。
9. arc() 绘制弧形图形，6个参数分别是X轴坐标点，Y轴坐标点，半径，开始角度（以弧度计），结束角度（以弧度计），是否为逆时针（False为逆时针，true为顺时针）。
10. fillReact() 矩形填充，4个参数分别为，矩形左上角x坐标，y坐标，矩形宽度，矩形高度。
11. strokeReact() 矩形连接，4个参数值，矩形左上角x坐标，y坐标，矩形宽度，矩形高度。
12. fontText() 绘制文字，4个参数分别为，书写的文字，绘制起点x坐标，y坐标，允许的最大文本宽度。
13. createLinearGradient(x1,y1,x2,y2) 定义渐变，x1为渐变起点x坐标，y1为渐变起点y坐标，x2定义渐变终点x坐标，y2定义渐变终点y坐标。
可以通过使用addColorStop()来定义渐变颜色。
14. closePath() 结束绘制路径。
