免費(fèi)AI編程助手
canvas動(dòng)畫包教不包會(huì)：canvas概述和動(dòng)畫基本概念
canvas元素是HTML5中新出現(xiàn)的，我們可以將其當(dāng)做一個(gè)像素級(jí)的畫布，它
允許我們繪制直線、圓、矩形等基本形狀，以及圖像和文字。使用canvas元素，可以實(shí)時(shí)渲染圖形、游戲動(dòng)畫或其他虛擬圖像
，而且它已經(jīng)為快速繪圖做過(guò)優(yōu)化了。各大主流瀏覽器都已經(jīng)支持GPU加速的2D canvas渲染，因此，使用canvas繪制出的游戲動(dòng)畫運(yùn)行速度會(huì)很快。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="400" height="500">
<P>你的瀏覽器不支持“canvas”！</P>
</canvas>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas'); // 獲取canvas元素
var ctx = canvas.getContext('2d'); // 獲取'2d'context對(duì)象
// 繪畫代碼
};
</script>
</body>
</html>
rect( x, y, width, height ) 繪制矩形
fillRect( x, y, width, height ) 繪制被填充的矩形
strokeRect( x, y, width, height ) 繪制矩形（無(wú)填充）
clearRect( x, y, width, height ) 清除指定的矩形內(nèi)的像素
fill() 填充當(dāng)前繪圖（路徑）
stroke() 繪制已定義的路徑
beginPath() 起始（重置）當(dāng)前路徑
moveTo( x, y ) 將筆觸移動(dòng)到指定的坐標(biāo)(x,y)
lineTo( x, y ) 繪制一條從當(dāng)前位置到指定的坐標(biāo)(x,y)的直線
clip() 從原始畫布剪切任意形狀和尺寸的區(qū)域
quadraticCurveTo() 創(chuàng)建二次貝塞爾曲線
bezierCurveTo() 創(chuàng)建三次貝塞爾曲線
arc( x, y, radius, startAngle, endAngle, anticlockwise) 繪制圓或圓弧
arcTo( x1, y1, x2, y2, radius) 根據(jù)給定點(diǎn)畫圓弧，再以直線連接兩個(gè)點(diǎn)
isPointInPath( x, y ) 檢測(cè)指定的點(diǎn)是否在當(dāng)前路徑中，在則返回true。
fillStyle 設(shè)置或返回用于填充繪畫的顏色、漸變或模式
strokeStyle 設(shè)置或返回用于筆觸的顏色、漸變或模式
shadowColor 設(shè)置或返回用于陰影的顏色
shadowBlur 設(shè)置或返回用于陰影的模糊級(jí)別
shadowOffsetX 設(shè)置或返回陰影與形狀的水平距離
shadowOffsetY 設(shè)置或返回陰影與形狀的垂直距離
lineCap 設(shè)置或返回線條的結(jié)束點(diǎn)樣式（butt、round、square）
lineJoin 設(shè)置或返回當(dāng)兩條線交匯時(shí)，邊角的類型（bevel、round、miter）
lineWidth 設(shè)置或返回當(dāng)前的線條寬度
miterLimit 設(shè)置或返回最大斜接長(zhǎng)度
createLinearGradient( x0, y0, x1, y1 ) 創(chuàng)建線性漸變
createPattern( image/canvas/video, repeat ) 在指定的方向內(nèi)重復(fù)繪制指定的元素
createRadialGradient( x0, y0, r0, x1, y1, r1 ) 創(chuàng)建徑向漸變
addColorStop( stop, color ) 規(guī)定漸變對(duì)象中的顏色和停止位置
font 設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性（和css的font一樣）
textAlign 設(shè)置或返回文本內(nèi)容的當(dāng)前對(duì)齊方式
textBaseline 設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線
fillText( text, x, y ) 在畫布上繪制“被填充”的文本
strokeText( text, x, y ) 在畫布上繪制文本（無(wú)填充）
measureText( text ) 返回包含指定文本寬度的對(duì)象（屬性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對(duì)象
getImageData( x, y, width, height ) 返回ImageData對(duì)象，該對(duì)象為畫布上指定的矩形復(fù)制像素?cái)?shù)據(jù)。
putImageData( ImageData, x, y )、putImageData( imageData, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight ) 把圖像數(shù)據(jù)放回畫布上。
width 返回ImageData對(duì)象的寬度
height 返回ImageData對(duì)象的高度
data 返回一個(gè)對(duì)象，包含指定的ImageData對(duì)象的圖像數(shù)據(jù)
globalAlpha 設(shè)置或返回繪圖的當(dāng)前alpha或透明度
globalCompositeOperation 設(shè)置或返回新圖像如何繪制到已有的圖像上。
scale( x, y ) 縮放當(dāng)前繪圖
translate( x, y ) 重新設(shè)置畫布上的(0,0)位置
rotate( angle ) 選擇當(dāng)前繪圖，單位為“弧度”，角度轉(zhuǎn)弧度公式（ degrees*Math.PI/180）
transform( m11, m12, m21, m22, dx, dy ) 替換繪圖的當(dāng)前轉(zhuǎn)換矩陣
setTransform() 將當(dāng)前轉(zhuǎn)換重置為單元矩陣，然后運(yùn)行transform()
save() 保存當(dāng)前環(huán)境的狀態(tài)
restore() 恢復(fù)之前保存過(guò)的路徑狀態(tài)和屬性
getContext('2d') 獲取2d對(duì)象
toDataURL() 將canvas轉(zhuǎn)換成圖片，返回地址
- 清空canvas（使用clearRect()或全圖繪制）
- 保存canvas狀態(tài)（可選）
- 繪制動(dòng)畫圖形
- 恢復(fù)canvas狀態(tài)（一般在第二步的基礎(chǔ)上使用）
setInterval( function, delay )
setTimeout( function, delay )
window.requestAnimationFrame( function )
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
window.cancelAnimationFrame = (window.cancelRequestAnimationFrame || window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelAnimationFrame || window.mozCancelRequestAnimationFrame || window.msCancelAnimationFrame || window.msCancelRequestAnimationFrame || window.oCancelAnimationFrame || window.oCancelRequestAnimationFrame || window.clearTimeout);
- 要實(shí)現(xiàn)動(dòng)畫，一定要熟練的使用canvas API和對(duì)JavaScript有一定的了解。
- 動(dòng)畫的實(shí)質(zhì)就是由一幅幅不同的靜態(tài)畫面以極快的速度連續(xù)播放從而產(chǎn)生物體運(yùn)動(dòng)或變化。
更多建議：