使用Canvas繪製旋轉動畫

2021-07-28 10:51:21 字數 760 閱讀 1341

在使用canvas繪製旋轉動畫時我們會遇到乙個問題:使用context.rotate();是將畫布進行旋轉,而並不是畫布上的繪製的圖形,那我們要怎樣做才能使畫布上圖形旋轉呢?

假設現在已經寫好了頁面,定義了canvas元素,下邊列出js**:

1.建立畫布:

var context=elem.getcontext('2d');//elem為接收到的canvas元素
2.獲取畫布的寬高

const width=elem.width;

const height=elem.height;

3.載入要繪製的:

var img=new image();

img.src="***.png";

4.平移畫布:

context.translate(width/2,height/2);
5.繪製

img.οnlοad=function()
//到此,靜態效果已經出來了
6.旋轉

context.rotate(math.pi);

context.drawimage(img,-img.width/2,-img.height/2);//旋轉完進行再次繪製

這已經完成了乙個旋轉動作,如果要連續旋轉,只需在加上定時器與時間控制即可。

android 旋轉動畫

1 在res下建立anim資料夾 xmlns android android interpolator android anim linear interpolator android duration 1500 android fromdegrees 0 android pivotx 50 and...

旋轉動畫的簡單使用

設定rotate動畫 param view 設定動畫的物件 param fromdegrees 初始時的角度 param todegrees 結束時的角度 param pivotx 旋轉動畫對於x座標開始位置 param pivoty 旋轉動畫對於y座標開始位置 param duration 動畫時...

使用canvas繪製圓弧動畫

對於canvas的繪製,首先需要在html內指定一塊畫布,即,可以看做是在ps中新建乙個空白文件,之後所有的操作都將呈現在這個文件之上,與ps的區別是,canvas本身沒有圖層的特性,當需要展示不同維度的檢視時,需要交由html的位置關係來解決。canvas標籤上,值得一提的就是width和heig...