Canvas 設置開始繪圖位置：ctx.moveTo(x,y); 設置直線到的位置：ctx.lineTo(x,y); 描邊繪製：ctx.stroke(); 填充繪製：ctx.fill(); 自動閉合路徑：ctx.closePath(); 開啟新的繪製：ctx.beginPath(); 設置描邊顏色： ...
Canvas
- 標簽
<canvas></canvas> - 預設寬300，高150，不用用Css設置寬高
- 獲取方法var ctx = cas.getcontext("2d"),該方法返回CanvasRenderingContext2D的類型對象，利用該方法繪圖
- 基本繪圖命令
- 設置開始繪圖位置：ctx.moveTo(x,y);
- 設置直線到的位置：ctx.lineTo(x,y);
- 描邊繪製：ctx.stroke();
- 填充繪製：ctx.fill();
- 自動閉合路徑：ctx.closePath();
- 開啟新的繪製：ctx.beginPath();
- 設置描邊顏色：ctx.strokeStyle;
- 設置填充顏色：ctx.fillStyle;
- 保存開始設置：ctx.save();
- 重置到保存樣式：ctx.restore();
- 線型相關屬性
- 設置線寬：ctx.linewidth;(數字即可)
- 設置線末端類型：ctx.lineCap;('butt' 表示兩端使用方形結束,'round' 表示兩端使用圓角結束,'square' 表示突出的圓角結束)
- 設置相交線的拐點：ctx.lineJoin;('round' 使用圓角連接,'bevel' 使用平切連接,'miter' 使用直角轉)
- 獲得線段樣式數組：ctx.getLineDash();
- 設置線段樣式：ctx.setLineDash();(數組形式設置)
- 繪製線段偏移量：ctx.lineDashOffset;
- 矩形繪圖命令
- 繪製矩形：ctx.rect;(因為還需要fill或者stroke才可以看見效果，所以直接使用下麵兩種)
- 繪製邊框矩形：ctx.strokeRect(x,y,width,height);
- 繪製填充矩形：ctx.fillRect(x,y,width,height);
- 清除矩形區域：ctx.clearRect(x,y,width,height);
- 圓弧繪製命令
- 繪製圓弧：ctx.arc(x,y,r,startAngle,endAngle,anticlockwise);參數 anticlockwise 表示是否採用預設的正向角度, 如果傳入 true 表示逆指針為正. 該參數可選
- 繪製相切弧：非重點
- 繪製文本命令
- 繪製填充文字：ctx.fillText(text,x,y);
- 繪製空心文字：ctx.strokeText(text,x,y);
- 設置文本寬度：ctx.measureText();(非重點)
- 設置字體樣式：ctx.font;
- 設置字體水平位置：ctx.textAlign;(start(預設), end, left, right, center)
- 設置字體垂直位置：ctx.textBaseline;(top, middle, bottom, hanging, alphabetic, ideographic)
- 繪製圖片命令
- 繪製圖片(3參數)：ctx.drawImage(img,x,y);
- 繪製圖片(5參數)：ctx.drawImage(img,x,y,width,height);
- 繪製圖片(9參數)：ctx.drawImage(img,casx,casy,caswidth,casheight,x,y,width,height);
- 變換命令
- 平移變換：ctx.translate(x,y);(x 表示水平移動, 正數向右, 負數向左;y 表示垂直移動, 正數向下, 負數向上)
- 旋轉變化：ctx.ratate(radian);(參數是弧度, 表示旋轉的方式. 正數表示順時針旋轉, 負數表示逆時針旋轉.)
- 縮放變化：ctx.scale(x,y);(x控制水平縮放倍率,y控制水平縮放倍率,傳1不做縮放)
