Canvas動畫的實現 塔吊

首頁構建容器

你的版本不支援canvas

注意：需要在頁面或影象載入完成後進行初始化操作，在body標籤裡加上οnlοad="initcanvas()"

var mcanvas; //宣告canvas物件;

var cxt; //宣告context物件,該物件擁有豐富的繪圖的api
function initmikyoucanvas(mcanvas, cxt) 
/** * 1、繪製矩形(主要分為:繪製填充矩形和繪製邊框矩形和清除矩形區域(利用isclear標記是否繪製清除矩形，實際上就是繪製乙個與畫布背景色一致的矩形區域),利用isfill變數來標記)
* 主要使用canvas原生的api:fillrect(x,y,width,height),strokerect(x,y,width,height),clearrect(x,y,width,height)
* 自己封裝的引數:drawrect(x,y,width,height,isclear,isfill,bgcolor)
* x:矩形起點的x座標(注意：相對座標系是以畫布的左上角為原點，向右為x座標正方向，向下為y座標的正方向)
* y:矩形終點的y座標
* width:矩形的寬度
* height:矩形的高度
* isclear:是否繪製清除畫布的矩形區域，true則就是繪製乙個清除畫布矩形區域，false就是繪製其他兩種矩形
* isfill:是否是填充，false為繪製邊框，true為繪製填充
* bgcolor:矩形的顏色，若為填充則為整個矩形背景色，邊框則為邊框色
* */
function drawrect(x, y, width, height, isclear, isfill, bgcolor) else else 
}}/**
* 2、繪製圓弧(主要分為：繪製填充圓弧和繪製圓弧邊框利用isfill變數來標記,注意：在繪製圓弧邊框的時候還有一種特殊情況就是，只需要僅僅繪製弧邊，不需要繪製圓弧開始起點和終點之間的連線，這個就是呼叫了beginpath()不需要呼叫closepath(),這裡也使用乙個isonlyarc變數來標記true為僅僅繪製弧邊
*其他的正常)
* 主要是使用的是canvas原生的api:
* arc(x,y,radius,startangle,endangle,anticlockwise);
* x:圓心x座標
* y:圓心y座標
* startangle:開始的弧度
* endangle:結束的弧度
* anticlockwise:true為逆時針，false為順時針
* 自己封裝的引數:drawcircle(x,y,radius,startangle，endangle,anticlockwise,isfill，bgcolor)
* x:圓心x座標
* y:圓心y座標
* startangle:開始的角度(通過getangle方法將傳入的角度轉換成相應角度的弧度，
*     因為在原生的繪製圓弧的api它是根據弧度大小來繪製的，例如如果你想繪製乙個30度的圓弧，如果直接傳入30是不行的，要傳入math.pi/6
* 所以在這裡個人做了乙個優化，直接傳入30就通過getangle方法轉換成math.pi/6，這樣就很方便的繪製自己傳入的角度大小的圓弧。
* )* endangle:結束的角度
* 注意:如果要繪製圓形那麼只需要呼叫該方法，傳入的startangle和endangle是0度和360度即可。
* anticlockwise:true為逆時針，false為順時針
* isfill:是否是填充，false為繪製邊框，true為繪製填充
* bgcolor:圓弧的顏色
* */
function drawarc(x, y, radius, startangle, endangle, anticlockwise, isonlyarc, isfill, bgcolor) else else 
cxt.stroke();
}}/**
* 3、繪製扇形(主要分為：繪製填充扇形和繪製扇形邊框利用isfill變數來標記）
*主要是使用的是canvas原生的api:
* arc(x,y,radius,startangle,endangle,anticlockwise);
* x:圓心x座標
* y:圓心y座標
* startangle:開始的弧度
* endangle:結束的弧度
* anticlockwise:true為逆時針，false為順時針
* 自己封裝引數api:drawsector(x,y,radius,startangle,endangle,anticlockwise,isfill,bgcolor);
* x:圓心x座標
* y:圓心y座標
* startangle:開始的角度(通過getangle方法將傳入的角度轉換成相應角度的弧度，
*     因為在原生的繪製圓弧的api它是根據弧度大小來繪製的，例如如果你想繪製乙個30度的圓弧，如果直接傳入30是不行的，要傳入math.pi/6
* 所以在這裡個人做了乙個優化，直接傳入30就通過getangle方法轉換成math.pi/6，這樣就很方便的繪製自己傳入的角度大小的圓弧。
* )* endangle:結束的角度
* anticlockwise:true為逆時針，false為順時針
* isfill:是否是填充，false為繪製邊框，true為繪製填充
* bgcolor:扇形的顏色
* */
function drawsector(x, y, radius, startangle, endangle, anticlockwise, isfill, bgcolor) else 
}/**
* @description 4、繪製線段(主要分為：繪製填充線段和繪製空心線段利用isfill變數來標記）
* 主要是使用的是canvas原生的api:
* lineto(x,y):表示從某點連線到該座標點
*moveto(x,y):表示將路徑移動到畫布中的該座標點
* x:畫布中某點的x座標
* y:畫布中某點的y座標
* 注意：如果開始沒有呼叫moveto,那麼第乙個lineto的功能就相當於乙個moveto
* 自己封裝的api:drawline(startx,starty,endx,endy,linewidth,bgcolor)
*  * startx:表示線的起點的x座標
* starty:表示起點的y座標
* endx:表示線的終點的x座標
* endy:表示線的終點的y座標
* linewidth:表示線段的寬度
* bgcolor:線的顏色
* */
function drawline(startx, starty, endx, endy, linewidth, bgcolor) 
/** * @description 5、繪製貝塞爾曲線
* drawbeziercurve
* */
//將角度轉換成弧度函式，
function getangle(arc) 
/** * @description 6、吊鉤
* varioushooks
* x原點橫座標,
* y原點縱座標,
* x變數值左右,
* y變數值上下,
* bgcolor顏色
* */
function varioushooks(x, y, x, y, bgcolor) 
/** * @description 7、叉線
* wiredcables
* */
function wiredcables(x, y, linewidth, bgcolor) 
/** * @description 8、文字
* wiredcables
* */
function drawtext(text, x, y, color, font, textalign) 

var mcanvas; //宣告canvas物件;

var cxt; //宣告context物件,該物件擁有豐富的繪圖的api
關於使用：可以將一些實時資料通過json陣列傳入實現動態模擬運動,以達到動態動畫的效果。
 
canvas實現動畫時鐘
實現效果如下 1.建立canvas元素 沒有金剛鑽就不要攬瓷器活2.繪製雙圓 var drawing document.getelementbyid drawing if drawing.getcontext 3.繪製刻度 繪製刻度 context.font bold 14px arial cont...
canvas之實現控制動畫
效果圖 簡單的思路分析 首先寫出使用畫布的基礎 再分析實現操作動畫的需求。確定畫布的大小，選定的路徑 確定操縱動畫時的行走步數 載入，設定大小 確定的起點，以及預設動畫的朝向 確定通過方向鍵動畫的走動方向 繪製動畫，對精靈圖進行定位，每次完成一次動畫都要對畫布進行清空。詳細 doctype html...
canvas實現時針動畫案例
步驟解析 繪製時分秒針 繪製輪盤 實現時分秒針的轉動 主要利用時間的重新整理和requestanimationframe 的步伐跟著系統的重新整理步伐走。主函式 init function init 實現動畫的函式 function draw ctx 繪製時分秒的動畫 繪製時分秒針 function...