canvas - 圖片繪制
1、 按照圖片原大小加載
drawImage(img,x,y)
img - 當前加載的圖片
x和y - 圖片左上角的位置
注意：
必須要保證圖片加載完畢后，再繪制圖片（繪制寫在onload事件里面）
2、 平鋪圖片
var ptn = context.createPattern(img,type)
img : 平鋪的圖片
type: 平鋪的方式 — 四種，使用時記得加 " "
repeat/no-repeat/repeaet-x/repeat-y
返回一個平鋪對象，將這個對象作為將要繪制圖像的填充顏色
context.fillStyle=ptn; //填充
context.fillRect(x,y,width,height); //繪制
注意：
必須要保證圖片加載完畢(onload事件)后，再繪制圖片，createPattern也要等到圖片加載完畢后執行
完整的 drawImage
drawImage(img_elem,dx_or_sx,dy_or_sy,dw_or_sw,dh_or_sh,dx,dy,dw,dh);
dx_or_sx,dy_or_sy
dw_or_sw,dh_or_sh
dw,dh
以上三對數值不寫就是按圖片原大小加載
增加一對 --> 匹配 dw,dh 即： drawImage(img_elem,dx,dy,dw,dh);
增加兩對 --> 會報錯;
增加三對 --> 全部匹配 即：drawImage(img_elem,sx,sy,sw,sh,dx,dy,dw,dh);
4、 圖形切割
<p><p> <strong>clip的定義和用法
clip() 方法從原始畫布中剪切任意形狀和尺寸。
提示：一旦剪切了某個區域，則所有之后的繪圖都會被限制在被剪切的區域內（不能訪問畫布上的其他區域）。
您也可以在使用 clip() 方法前通過使用 save() 方法對當前畫布區域進行保存，并在以后的任意時間對其進行恢復（通過 restore() 方法）。
矩形切割
context.rect(x,y,width,height);
context.clip()圓型切割
context.arc(x,y,radius,startAngle,endAngle,direction)
context.clip()css中的切割
clip:rect(0px 50px 200px 0px)
數值對應 上、下、左、右四個方向的切割量
矩形切割的實例
<!DOCTYPE html>
<html>
<body>
<p>不使用 clip()：</p>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
</script>
<br />
<p>使用 clip()：</p>
<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
</script>
</body>
</html>
canvas - 部分轉換、其他方法
1、 scale(x,y); — 縮放
x - 水平方向上的縮放
y - 初值方向上的縮放
context.scale(sx,sy);
sx: 讓x和width進行縮放
sy: 讓y和height進行縮放
多次縮放效果會進行疊加
context.fillRect(x,y,width,height);//繪制
2、translate(x,y) — 重新映射畫布上的（0,0）位置
context.translate(tx,ty); // 即原來的參考點移到（tx，ty）點
context.fillRect(x,y,width,height); //繪制，x 和 y 是相對于點（tx，ty）
tx和ty改變了矩形的x和y的參考點，也可以改變旋轉的中心點
3、rotate(degrees * Math.PI / 180) — 旋轉畫布
degrees：代表你想旋轉的角度
正數： 順時針
4、 save() 保存當前畫布屬性、狀態
<p> 在使用 clip() 方法前通過使用 save() 方法對當前畫布區域進行保存
5、 resotre() 恢復畫布屬性狀態
<p> 使用 resotre()恢復上一次被改變前的狀態
上一篇：<a href="http://www.lxweimin.com/p/bef7f6deb4c9">canvas繪制文字、矩形、圓形、線條</a>
