canvas的api總結

簡介

Canvas是 HTML5 新增的，一個能夠使用腳本(一般爲JavaScript)在其中繪製圖像的 HTML 元素。它能夠用來製做

照片集或者製做簡單(也不是那麼簡單)的動畫，甚至能夠進行實時視頻處理和渲染。

Canvas是由HTML代碼配合高度和寬度屬性而定義出的可繪製區域。JavaScript代碼能夠訪問該區域，相似於其餘通用

的二維API，經過一套完整的繪圖函數來動態生成圖形。

​Mozilla 程序從 Gecko 1.8 (Firefox 1.5)開始支持Canvas, Internet Explorer 從IE9開始支持。Chrome和Opera 9+ 也支持。

canvas的基本使用

1.canvas標籤使用

<canvas id="target" width="300px" height="150px">
  不支持canvas標籤會顯示該內容
</canvas>
複製代碼

2.canvas方法檢查

var canvas = document.getElement('target')
if (canvas.getContext) {
  var ctx = canvas.getContent('2d')
} else {
  console.log('該瀏覽器版本太低，請更換')
}
複製代碼

3.canvas繪製圖形

canvas的api

rect( x, y, width, height )   繪製矩形

fillRect( x, y, width, height )  繪製被填充的矩形

strokeRect( x, y, width, height )  繪製矩形（無填充）

clearRect( x, y, width, height ) 清除指定的矩形內的像素



fill()  填充當前繪圖（路徑）

stroke() 繪製已定義的路徑

beginPath()  起始（重置）當前路徑

moveTo( x, y )  將筆觸移動到指定的座標(x,y)

lineTo( x, y )  繪製一條從當前位置到指定的座標(x,y)的直線

clip()  從原始畫布剪切任意形狀和尺寸的區域



quadraticCurveTo()  建立二次貝塞爾曲線

bezierCurveTo()   建立三次貝塞爾曲線



arc( x, y, radius, startAngle, endAngle, anticlockwise)  繪製圓或圓弧

arcTo( x1, y1, x2, y2, radius)  根據給定點畫圓弧，再以直線鏈接兩個點

isPointInPath( x, y )  檢測指定的點是否在當前路徑中，在則返回true。

fillStyle  設置或返回用於填充繪畫的顏色、漸變或模式

strokeStyle  設置或返回用於筆觸的顏色、漸變或模式

shadowColor  設置或返回用於陰影的顏色

shadowBlur   設置或返回用於陰影的模糊級別

shadowOffsetX  設置或返回陰影與形狀的水平距離

shadowOffsetY  設置或返回陰影與形狀的垂直距離


lineCap  設置或返回線條的結束點樣式（butt、round、square）

lineJoin  設置或返回當兩條線交匯時，邊角的類型（bevel、round、miter）

lineWidth  設置或返回當前的線條寬度

miterLimit  設置或返回最大斜接長度


createLinearGradient( x0, y0, x1, y1 )  建立線性漸變

createPattern( image/canvas/video, repeat )  在指定的方向內重複繪製指定的元素

createRadialGradient( x0, y0, r0, x1, y1, r1 ) 建立徑向漸變

addColorStop( stop, color )  規定漸變對象中的顏色和中止位置

font  設置或返回文本內容的當前字體屬性（和css的font同樣）

textAlign  設置或返回文本內容的當前對齊方式

textBaseline  設置或返回在繪製文本時使用的當前文本基線

fillText( text, x, y )  在畫布上繪製「被填充」的文本

strokeText( text, x, y )  在畫布上繪製文本（無填充）

measureText( text )  返回包含指定文本寬度的對象（屬性width獲取寬度）

drawImage( image/canvas, x, y )、drawImage( image/canvas, x, y, width, height )、drawImage( image/canvas, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )  在畫布上繪製圖像、畫布或視頻

createImageData( width, height )、createImageData(imageData)  繪製ImageData對象

getImageData( x, y, width, height )  返回ImageData對象，該對象爲畫布上指定的矩形複製像素數據。

putImageData( ImageData, x, y )、putImageData( imageData, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )  把圖像數據放回畫布上。

width  返回ImageData對象的寬度

height  返回ImageData對象的高度

data  返回一個對象，包含指定的ImageData對象的圖像數據

globalAlpha  設置或返回繪圖的當前alpha或透明度

globalCompositeOperation  設置或返回新圖像如何繪製到已有的圖像上。

scale( x, y )  縮放當前繪圖

translate( x, y )  從新設置畫布上的(0,0)位置

rotate( angle )  選擇當前繪圖，單位爲「弧度」，角度轉弧度公式（ degrees*Math.PI/180）

transform( m11, m12, m21, m22, dx, dy )  替換繪圖的當前轉換矩陣

setTransform()  將當前轉換重置爲單元矩陣，而後運行transform()

save()  保存當前環境的狀態

restore()  恢復以前保存過的路徑狀態和屬性

getContext('2d')  獲取2d對象

toDataURL()  將canvas轉換成圖片，返回地址


複製代碼