canvas 實戰

canvas：

1. 關於width和height
   1. width 和 height 屬性是設定畫板和畫紙的寬高 --  如： width=」300」 height=」300」 即畫板的寬高是300*300，畫紙的寬高也是300*300，做業的300*300 的對角線圖像就不會被拉伸
   2. style樣式 裏設定的是僅畫板的寬高，畫紙的寬高仍是爲默認值300*150  -- 
      • 　　
      • Btw 畫紙不會讓畫板就這麼空出一片，因而畫紙連同圖像就要一塊兒拉伸到跟畫板大小同樣。在此例子當中，畫紙寬與畫板寬都爲300，而高爲畫板的一半，所以只需將高拉伸一倍便可，so 圖像也一塊兒被拉伸變瘦，X方向不變，Y方向增至一倍， 因此就獲得了變形以後的圖片
   3. 引用http://www.javashuo.com/article/p-aghawthy-eb.html的總結  
      • 　　

 

 canvas的API

1.  rect( x, y, width, height )   繪製矩形
2.  fillRect( x, y, width, height )  繪製被填充的矩形
3.  strokeRect( x, y, width, height )  繪製矩形（無填充）
4.  clearRect( x, y, width, height ) 清除指定的矩形內的像素
5.  fill()  填充當前繪圖（路徑）
6.  stroke() 繪製已定義的路徑
7.  beginPath()  起始（重置）當前路徑
8.  moveTo( x, y )  將筆觸移動到指定的座標(x,y)
9.  lineTo( x, y )  繪製一條從當前位置到指定的座標(x,y)的直線
10.  clip()  從原始畫布剪切任意形狀和尺寸的區域
11.  quadraticCurveTo()  建立二次貝塞爾曲線
12.  bezierCurveTo()   建立三次貝塞爾曲線
13.  arc( x, y, radius, startAngle, endAngle, anticlockwise)  繪製圓或圓弧  anticlockwise: 規定應該逆時針仍是順時針繪圖。False = 順時針，true = 逆時針。
14.  arcTo( x1, y1, x2, y2, radius)  根據給定點畫圓弧，再以直線鏈接兩個點
15.  isPointInPath( x, y )  檢測指定的點是否在當前路徑中，在則返回true。
16.  fillStyle  設置或返回用於填充繪畫的顏色、漸變或模式
17.  strokeStyle  設置或返回用於筆觸的顏色、漸變或模式
18.  shadowColor  設置或返回用於陰影的顏色
19.  shadowBlur   設置或返回用於陰影的模糊級別
20.  shadowOffsetX  設置或返回陰影與形狀的水平距離
21.  shadowOffsetY  設置或返回陰影與形狀的垂直距離
22.  lineCap  設置或返回線條的結束點樣式（butt、round、square）
23.  lineJoin  設置或返回當兩條線交匯時，邊角的類型（bevel、round、miter）
24.  lineWidth  設置或返回當前的線條寬度
25.  miterLimit  設置或返回最大斜接長度
26.  createLinearGradient( x0, y0, x1, y1 )  建立線性漸變
27.  createPattern( image/canvas/video, repeat )  在指定的方向內重複繪製指定的元素
28.  createRadialGradient( x0, y0, r0, x1, y1, r1 ) 建立徑向漸變
29.  addColorStop( stop, color )  規定漸變對象中的顏色和中止位置
30.  font  設置或返回文本內容的當前字體屬性（和css的font同樣）
31.  textAlign  設置或返回文本內容的當前對齊方式
32.  textBaseline  設置或返回在繪製文本時使用的當前文本基線
33.  fillText( text, x, y )  在畫布上繪製「被填充」的文本
34.  strokeText( text, x, y )  在畫布上繪製文本（無填充）
35.  measureText( text )  返回包含指定文本寬度的對象（屬性width獲取寬度）
36.  drawImage( image/canvas, x, y )、drawImage( image/canvas, x, y, width, height )、drawImage( image/canvas, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )  在畫布上繪製圖像、畫布或視頻
37.  createImageData( width, height )、createImageData(imageData)  繪製ImageData對象
38.  getImageData( x, y, width, height )  返回ImageData對象，該對象爲畫布上指定的矩形複製像素數據。
39.  putImageData( ImageData, x, y )、putImageData( imageData, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )  把圖像數據放回畫布上。
40.  width  返回ImageData對象的寬度
41.  height  返回ImageData對象的高度
42.  data  返回一個對象，包含指定的ImageData對象的圖像數據
43.  globalAlpha  設置或返回繪圖的當前alpha或透明度
44.  globalCompositeOperation  設置或返回新圖像如何繪製到已有的圖像上。
45.  scale( x, y )  縮放當前繪圖
46.  translate( x, y )  從新設置畫布上的(0,0)位置
47.  rotate( angle )  選擇當前繪圖，單位爲「弧度」，角度轉弧度公式（ degrees*Math.PI/180）
48.  transform( m11, m12, m21, m22, dx, dy )  替換繪圖的當前轉換矩陣
49.  setTransform()  將當前轉換重置爲單元矩陣，而後運行transform()
50.  save()  保存當前環境的狀態
51.  restore()  恢復以前保存過的路徑狀態和屬性
52.  getContext('2d')  獲取2d對象
53.  toDataURL()  將canvas轉換成圖片，返回地址

 

github地址：https://caraxiong.github.io/canvasTools/src/index.html