首先再次和大家分享一下基础的canvas模板，下面的例子我们将只会为大家展示draw函数内“var cxt=myCanvas.getContext("2d");”以下的代码：
<!DOCTYPE html>
<html>
<head>
<title>myCanvas</title>
<script type="text/javascript">
function draw()
{
var myCanvas=document.getElementById("myCanvas");
var cxt=myCanvas.getContext("2d");
}
</script>
<style type="text/css">
* { margin:0; padding:0;}
</style>
</head>
<body onLoad="draw()">
<canvas id="myCanvas" width="200" height="200"> Your browser does not support the canvas element. </canvas>
</body>
</html>
首先复习一下如何绘制矩形：
cxt.fillStyle="#000";
cxt.fillRect(50, 50, 100, 100);
接下来是关于canvas里面唯一的固定形状矩形的一些方法：
fillRect(x, y, width, height); //矩形填充 x：矩形左上角原点x轴坐标 y：矩形左上角原点y轴坐标 width：矩形宽 height：矩形高
strokeRect(x, y, width, height); //矩形描边
clearRect(x, y, width, height); //矩形清除 使用矩形清除后所在区域将去除一起图形呈现出透明状态
在此需要提及一个小技巧，绘制一个矩形描边：
cxt.strokeRect(50, 50, 100, 100);
你会发现这个矩形描边有些模糊那是因为canvas坐标为整数时线的状态是在两个像素之间：
而坐标为0.5时才是正好位于一个像素上：
所以只要这样，就可以得到锐利的矩形了：
cxt.strokeRect(50.5, 50.5, 100, 100);
接下来是路径绘制的一些方法，这和一些矢量图形处理软件中对路径的理解基本一致例如Adobe Illustrator：
beginPath(); //绘制新路径，重置所有子路径
closePath(); //尝试用直线连接当前点与起始点
stroke(); //描边路径
fill(); //填充路径
moveTo(x, y); //移动路径当前点
lineTo(x, y); //用直线绘制路径
例：
cxt.beginPath();
cxt.moveTo(10.5, 10.5);
cxt.lineTo(100.5, 100.5);
cxt.lineTo(100.5, 10.5);
cxt.closePath();
cxt.stroke();
arc(x, y, radius,
beginAngle, endAngle, anticlockwise); x，y：圆心坐标； radius：半径； beginAngle,
endAngle：开始的弧度和结束的弧度； anticlockwise：参数为true时为逆时针，参数为false时为顺时针；
这里beginAngle和endAngle都是使用的弧度制，角度和弧度的转换公式为var radians = (Math.PI/180)*degrees;
例：
cxt.beginPath();
cxt.arc(100, 100, 50, 0, Math.PI*2, true);
cxt.stroke();
当然还有需要复杂计算的二次方曲线和贝塞尔曲线，在此就不做过多介绍：
quadraticCurveTo(cp1x, cp1y, x, y); //二次方曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); //贝塞尔曲线