创建路径绘制线条
<canvas id="canvas" width="400px" height="400px"></canvas>
<script type="text/javascript">
var context = document.getElementById("canvas").getContext("2d");
//只要使用路径作图就要调用
context.beginPath();
context.strokeStyle = "yellow";
// moveTo设置起点
context.moveTo(20,20);
// lineTo设置终点/折点
context.lineTo(100,100);
context.lineTo(30,10);
// lineWidth设置线条的宽度
context.lineWidth = 20;
// lineCap设置线条端点的形状 butt - 平角 round - 圆角 square - 正方向
context.lineCap = "square";
// 设置两条线交点的形状 miter - 尖角 round - 圆角 bevel - 斜角
context.lineJoin = "miter";
//设置尖角延伸范围 miterLimit - 配合lineJoinde的miter使用
context.miterLimit = 100;
//closePath()可以让起点和终点闭合
//context.closePath();
// 画图，此时划线使用stroke，使用fill无效
context.stroke();
</script>
绘制与切割图片
<canvas id="canvas" width="400px" height="400px" style="background: red;"></canvas>
<script type="text/javascript">
//绘制图片
/*var context = document.getElementById("canvas").getContext("2d");
//获取图片的两种方式
//var img = document.createElement("img");
//img.src = "class.jpg";
var img = new Image();
img.src = "class.jpg";
//设置宽高是没效果的
img.width = 200;
img.height = 200;
//当图片准备好后再绘制
img.onload = function () {
//绘制图片,按照图片本身的大小加载
//drawImage(img,x,y) img - 当前加载的图片 x和y - 图片左上角的位置
context.drawImage(img,4,14)
}*/
//平铺图片
//var ptn = createPattern(img,type) 返回一个平铺对象，将这个对象作为将要绘制图像的填充颜色 img : 平铺的图片 type: 平铺的方式
var context = document.getElementById("canvas").getContext("2d");
var img = new Image();
img.src = "class.jpg";
img.onload = function () {
//创建平铺对象
var ptn = context.createPattern(img,"repeat");
context.fillStyle = ptn;
context.fillRect(0,0,400,400);
}
</script>
//切割图片
<script type="text/javascript">
var context = document.getElementById("canvas").getContext("2d");
var img = new Image();
img.src = "class.jpg";
img.onload = function () {
context.drawImage(img,0,0);
}
//注意调用beginPath()
context.beginPath();
//指定路径
context.arc(192/2,168/2,80,0,2*Math.PI);
//开始切割，裁剪图片 clip()
context.clip();
</script>
画布方法，缩放平移和旋转
1.scale(x,y); - 缩放
x - 水平方向上的缩放
y - 初值方向上的缩放
context.scale(sx,sy)
context.fillRect(x,y,width,height)
sx: 控制x和width的缩放
sy: 控制y和height的缩放
多次缩放效果会进行叠加
2.translate(x,y) - 重新映射画布上的（0,0）位置
x，y改变了图形的参考点
3.rotate(); 旋转画布
degrees * Math.PI / 180;
degrees代表了你想旋转的角度，正数是顺时针旋转
4.save() 保存当前画布属性、状态
5.restore() 恢复画布属性状态
例子
<canvas id="canvas" width="400px" height="400px" style="background: orange;"></canvas>
<script type="text/javascript">
var context = document.getElementById("canvas").getContext("2d");
context.fillStyle = "chocolate";
//缩放，x，y，width，height都按照比例缩放
//x和width按照第一个参数的比例缩放
//y和height按照第二个参数的比例缩放
//context.scale(0.5,0.5);
//translate平移其实是改变参考点的位置
//没有设置平移前，参考点是（0,0）
//context.translate(50,50)
//设置旋转角度，正数是顺时针旋转，参考点为translate的x和y
/*
* 如果想设置中心旋转
* 1.先利用translate改变旋转的参考点
* 2.改变参考点以后图形的位置会发生变化，让图形的x和y分别减去translate的x和y，让图形恢复到原来的位置
* 3.使用rotate让图形进行旋转
*/
context.translate(200,200)
context.rotate(45*Math.PI/180);
context.fillRect(-100,-100,200,200);
</script>
