首先在body中写个<canvas>，设定大小，个人建议大小要在行内设置，不然在部分情况下会发生错误。
CSS部分
给canvas加个边框，这边框只是为了方便看出canvas的边界，加不加都可以。
<style type="text/css"> canvas{ border:1px solid #000; } </style>
HTML部分
<canvas id="canvas" width="500" height="500"></canvas>
JSt部分
canvas是一个画布，要操作它，需要使用javascript，所以我们要在javascript中获取它
var canvas = document.getElementById(‘canvas‘);
然后设置画画的环境，canvas是一个功能很强大的标签，这里我先简述下2d环境下的
var context = canvas.getContext(‘2d‘);
上述设置都做好后，就可以在画布上画东西了，例：
画一条线
context.lineWidth = 4;//设置画笔粗细 context.strokeStyle = ‘red‘;//设置画笔颜色 context.beginPath();//开始路径 context.moveTo(100,100);//落笔点（100,100） context.lineTo(100,200);//移动到（100,200）点上 context.closePath()//结束路径 context.stroke();//上色
结果如图：
closePath()方法有闭合路径的功能，也就是说不管最后一个点在哪，它都会自动生成一条线条将第一个点与最后一个点连接起来，上述例子由于是线条，看出不来，这个功能画几何图形的时候能给你带来些许便利，例：
context.beginPath();//开始路径 context.moveTo(100,100); context.lineTo(100,200); context.lineTo(200,200); context.closePath()//结束路径 context.stroke();
效果如图：
| 属性 | 简介 |
|---|---|
| canvas | 指向绘图环境所属的canvas对象 |
| fillstyle | 指定该绘图环境在后续的图形填充操作中所使用的颜色，渐变色或方案 |
| font | 设定在调用绘图环境对象的fillText()或strokeText()方法时，所使用的字型 |
| globalAlpha | 指定全局透明度，取值范围0~1 |
| globalCompsiteOperation | 将某个物体绘制在其他的物体之上时采用的绘制方式，取值范围source-atop, source-in, source-out, source-over, destination-top, destination-in, destination-out, destination-over, lighter, copy, xor |
| lineCap | 该值告诉浏览器如何绘制线段的端点，取值范围butt, round, square |
| lineWidth | 线条的宽度 |
| lineJoin | 线条绘制交叉的时候的绘制方式，bevel, round, miter |
| miterLimit | 如何绘制miter形式的线段焦点 |
| shadowBlur | 延伸的阴影效果，取值为非负的无穷量的double值，该值为高斯模糊方程式中的参数值 |
| shadowColor | 阴影的颜色值 |
| shadowOffsetX | 阴影效果的水平方向偏移量 |
| shadowOffsetY | 阴影效果的垂直方向偏移量 |
| strokeStyle | 对路径描边时所使用的绘制风格 |
| textAlign | fillText()或strokeText()方法绘制的时候，所画文本的水平对齐方式 |
| textBaseline | fillText()或strokeText()方法绘制的时候，所画文本的水平对齐方式 |
原文：http://www.cnblogs.com/n-b-s-p/p/5925647.html