canvas - 圖片繪制
1迟赃、 按照?qǐng)D片原大小加載
drawImage(img,x,y)
img - 當(dāng)前加載的圖片
x和y - 圖片左上角的位置
注意：
必須要保證圖片加載完畢后歉备，再繪制圖片（繪制寫(xiě)在onload事件里面）
2袭异、 平鋪圖片
var ptn = context.createPattern(img,type)
img : 平鋪的圖片
type: 平鋪的方式 — 四種焙糟，使用時(shí)記得加 " "
repeat/no-repeat/repeaet-x/repeat-y
返回一個(gè)平鋪對(duì)象，將這個(gè)對(duì)象作為將要繪制圖像的填充顏色
context.fillStyle=ptn; //填充
context.fillRect(x,y,width,height); //繪制
注意：
必須要保證圖片加載完畢(onload事件)后晾捏，再繪制圖片，createPattern也要等到圖片加載完畢后執(zhí)行
完整的 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
以上三對(duì)數(shù)值不寫(xiě)就是按圖片原大小加載
增加一對(duì) --> 匹配 dw,dh 即： drawImage(img_elem,dx,dy,dw,dh);
增加兩對(duì) --> 會(huì)報(bào)錯(cuò);
增加三對(duì) --> 全部匹配 即：drawImage(img_elem,sx,sy,sw,sh,dx,dy,dw,dh);
4哀托、 圖形切割
<p><p> <strong>clip的定義和用法
clip() 方法從原始畫(huà)布中剪切任意形狀和尺寸惦辛。
提示：一旦剪切了某個(gè)區(qū)域，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)（不能訪問(wèn)畫(huà)布上的其他區(qū)域）仓手。
您也可以在使用 clip() 方法前通過(guò)使用 save() 方法對(duì)當(dāng)前畫(huà)布區(qū)域進(jìn)行保存胖齐，并在以后的任意時(shí)間對(duì)其進(jìn)行恢復(fù)（通過(guò) 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)
數(shù)值對(duì)應(yīng) 上嗽冒、下呀伙、左、右四個(gè)方向的切割量
矩形切割的實(shí)例
<!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 - 部分轉(zhuǎn)換添坊、其他方法
1剿另、 scale(x,y); — 縮放
x - 水平方向上的縮放
y - 初值方向上的縮放
context.scale(sx,sy);
sx: 讓x和width進(jìn)行縮放
sy: 讓y和height進(jìn)行縮放
多次縮放效果會(huì)進(jìn)行疊加
context.fillRect(x,y,width,height);//繪制
2、translate(x,y) — 重新映射畫(huà)布上的（0,0）位置
context.translate(tx,ty); // 即原來(lái)的參考點(diǎn)移到（tx贬蛙，ty）點(diǎn)
context.fillRect(x,y,width,height); //繪制雨女，x 和 y 是相對(duì)于點(diǎn)（tx，ty）
tx和ty改變了矩形的x和y的參考點(diǎn)阳准，也可以改變旋轉(zhuǎn)的中心點(diǎn)
3氛堕、rotate(degrees * Math.PI / 180) — 旋轉(zhuǎn)畫(huà)布
degrees：代表你想旋轉(zhuǎn)的角度
正數(shù)： 順時(shí)針
4、 save() 保存當(dāng)前畫(huà)布屬性野蝇、狀態(tài)
<p> 在使用 clip() 方法前通過(guò)使用 save() 方法對(duì)當(dāng)前畫(huà)布區(qū)域進(jìn)行保存
5讼稚、 resotre() 恢復(fù)畫(huà)布屬性狀態(tài)
<p> 使用 resotre()恢復(fù)上一次被改變前的狀態(tài)
上一篇：<a href="http://www.reibang.com/p/bef7f6deb4c9">canvas繪制文字、矩形绕沈、圓形锐想、線條</a>
