1.画布标签 <canvas id="myCanvas" width=450 height=300 margin-top =0px;margin-left=0px style="border:1px solid #c3c3c3;">
上例画出画布，并设置其大小和边框风格，对齐方式，与普通标签属性基本相同，不做详细介绍。
2.在canvas画布上作画，需要用javascript函数对其进行控制，使用以下语句获得API接口实例，对画布进行操作：
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
看到2d是否会联想到令人激动的3d？可惜的是，canvas目前还没有3d这么一说
3.画线：
context.moveTo(x1, y1);
context.lineTo(x2, y2);
画出从x1,y1到x2,y2的线段，可以用：
context.strokeStyle = "black";
context.lineWidth = 2;
设置线条的属性
4.画矩形：
示例代码如下，注释中有对函数的解释：
|
1
2
3
4
5
6 |
context.fillStyle = "rgba(0, 0, 200, 0.5)"; //填充的颜色，三个参数分别是：红绿蓝深度，透明度 context.strokeStyle = "000"; //边框颜色 context.lineWidth= 1 ; //边框宽 context.fillRect(x, y, w, h); //填充颜色 x y坐标 宽 高 context.strokeRect(x, y, w, h); //填充边框 x y坐标 宽 高 |
5.画个圆吧：
效果是一个实心的红色圆，各个参数的含义依次为：圆心坐标为（70， 18） 半径为15， 起始角为0°，终止角为360°，画方向为顺时针(逆时针自然为false咯)
6.来几条贝塞尔曲线？
支持二次贝塞尔曲线和三次贝塞尔曲线，有点意思，以下有具体的介绍，链接，可以用它做很多事情哦~~
7.插入图片：
使用函数如下：
|
1
2
3
4
5
6 |
var img=new Image(); img.src="图片.jpg"; img.onload = function () //确保图片已经加载完毕 { context.drawImage(img,0,0); } |
drawImage这个函数被重载过，可以有3个、5个或9个参数
3个参数：最基本的 drawImage使用方法。一个参数指定图像源，另两个参数设置图像在 canvas中的位置。
5个参数：中级的 drawImage 使用方法，包括上面所述3个参数，加两个参数指明插入图像宽度和高度 (如果你想改变图像大小)。
9个参数：最复杂 drawImage 杂使用方法，包含上述5个参数外，另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。
先告一段落吧，用这些函数已经可以做很多事情了哦~
原文：http://www.cnblogs.com/ciangcic/p/3527947.html