通過這幾天的學習,瞭解了canvas實現動畫的基本原理,我們在製作動畫的過程中思路其實就是擦掉原圖然後繪製新的圖,在視覺上會給人一種動畫的效果。下面在製作動畫效果中經常用到的函數進行解釋
Beginpath()只用調用該函數後才能開始繪畫
Closepath()銜接(鏈接開始位置和結束位置)
moveTo(x,y)將位置移到新目標
lineTo(x,y)繪製直線
stroke()繪製確切的路徑
fill()填充
fillStylle填充顏色
save()保存狀態
restore()恢復上一次保存的save狀態
translate(x,y)位置平移
scale(寬,高)放大
addColorStop(偏移量,顏色參數)設置漸變色
rgba()透明
rorate(弧度)旋轉
setInterval(函數名,時間)定時執行函數
clearInterval(定時器的id)取消定時器
加載圖像
var bark=new Image();
bark.src=’bark.jpg’
context.drawImage(bark,x,y,width,height);