canvas小結
透過這幾天的學習,瞭解了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);
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/756/viewspace-2813320/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 微信小程式 canvas 繪圖問題總結微信小程式Canvas繪圖
- canvas小知識Canvas
- 《HTML5Canvas遊戲開發實戰》——3.4 小結HTMLCanvas遊戲開發
- Canvas API總結CanvasAPI
- 小程式的填坑小技巧之CanvasCanvas
- 小程式的一些總結:畫canvas和內嵌webviewCanvasWebView
- Canvas乾貨總結Canvas
- 實現小程式canvas拖拽功能Canvas
- 小程式canvas的一個坑Canvas
- canvas效能優化總結Canvas優化
- Vue + Canvas專案總結VueCanvas
- canvas複習總結(一)Canvas
- canvas複習總結(二)Canvas
- canvas小畫板--(1)平滑曲線Canvas
- canvas小畫板——(3)筆鋒效果Canvas
- 小程式的canvas繪圖的封裝Canvas繪圖封裝
- 小程式canvas居中剪裁繪製圖片Canvas
- Canvas——滑桿操控圖片放大縮小Canvas
- 小程式 canvas 生成海報 一次搞掂Canvas
- 小程式canvas適配android7,8CanvasAndroid
- 2019.1.21 canvas學習小計Canvas
- 微信小程式 canvas圓角矩形的繪製微信小程式Canvas
- react小專案 - canvas海報生成器ReactCanvas
- 用canvas開發H5遊戲小記CanvasH5遊戲
- 學習canvas基礎的總結Canvas
- tkinter Canvas畫圖片大坑總結Canvas
- [開蓋即食]小程式Canvas官方新版API實戰CanvasAPI
- [外掛擴充套件]canvas小動畫 - 青蛙掛件套件Canvas動畫
- 微信小程式(canvas)畫圖儲存到本地相簿(wepy)微信小程式Canvas
- 前端小專案:使用canvas繪畫哆啦A夢前端Canvas
- canvas畫布基本知識點總結Canvas
- 微信小程式小總結微信小程式
- 小程式利用Canvas繪製圖片和豎排文字Canvas
- 基於 canvas 實現的一個截圖小 demoCanvas
- canvas繪製憤怒小鳥形象程式碼例項Canvas
- Django——小結Django
- Jquery小結jQuery
- margin小結