繪制圖片
-
按圖片原大小繪制
var context = document.getElementById("canvas").getContext("2d");//準備圖片元素對象 var img = new Image(); img.src = "class.jpg"; img.width = 200; img.height = 200; //當圖片準備以后再繪制 img.onload = function(){ //繪制圖片,按照圖片本身的大小進行加載 context.drawImage(img,0,0); } -
平鋪圖片
var context = document.getElementById("canvas").getContext("2d");var img = new Image(); img.src = "class.jpg"; img.onload = function(){ //創建平鋪對象 var pat = context.createPattern(img,"repeat-y"); //將平鋪對象作為填充顏色 context.fillStyle = pat; //繪制 context.fillRect(0,0,400,400); }
繪制線條
-
繪制方法
1）設置起點坐標值
moveTo(x,y);2）設置終點(折點)坐標值
lineTo(x,y); -
繪制線條的屬性
1）設置線條的寬度，默認1px
lineWidth2）設置線條端點的形狀
lineCap 起點和終點的樣式 butt - 平角 round - 圓角 square - 正方向3）設置兩條線交點的形狀
lineJoin 折點的樣式 miter - 尖角 round - 圓角 bevel - 斜角4）miterLimit - 配合lineJoin使用
lineJoin設置為miter，該屬性值設置尖角延伸范圍
圖片切割
clip() 方法從原始畫布中剪切任意形狀和尺寸。
提示 ：一旦剪切了某個區域，則所有之后的繪圖都會被限制在被剪切的區域內（不能訪問畫布上的其他區域）。
您也可以在使用 clip() 方法前通過使用 save() 方法對當前畫布區域進行保存，并在以后的任意時間對其進行恢復（通過 restore() 方法）。
畫布方法
scale(x,y); — 縮放
x - 水平方向上的縮放 y - 初值方向上的縮放 context.scale(sx,sy); sx: 讓x和width進行縮放 sy: 讓y和height進行縮放 多次縮放效果會進行疊加context.fillRect(x,y,width,height);//繪制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的參考點，也可以改變旋轉的中心點rotate(degrees * Math.PI / 180) — 旋轉畫布
degrees：代表你想旋轉的角度 正數： 順時針-
save() 保存當前畫布屬性、狀態
在使用 clip() 方法前通過使用 save() 方法對當前畫布區域進行保存 -
resotre() 恢復畫布屬性狀態
使用 resotre()恢復上一次被改變前的狀態
