利用canvas来绘制一个会动的图画
生活随笔
收集整理的這篇文章主要介紹了
利用canvas来绘制一个会动的图画
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>繪制小人動畫</title>
6 <style>
7 canvas{
8 border: 1px solid green;
9 }
10 </style>
11 </head>
12 <body>
13 <!-- 繪制小人動畫 -->
14 <canvas width="400" height="600" id="canvas"></canvas>
15 </body>
16 <script>
17 var canvas = document.getElementById('canvas');
18 var ctx = canvas.getContext('2d');
19 function toAngle(radian){
20 return radian*180/Math.PI;
21 }
22 function toRadian(angle){
23 return angle*Math.PI/180;
24 }
25 function img(ctx,element,x0,y0){
26 var x = x0,
27 y = y0;
28 element.onload = function(){
29 var width = element.width/4,
30 height = element.height/4;
31 var i = 0,
32 j = 0,
33 a = 0;
34 setInterval(function(){
35 //x = x a;
36 ctx.clearRect(x,y,width,height);
37 ctx.drawImage(element,width*i,height*j,width,height,x,y,width,height);
38 i ;
39 if(i == 4){
40 setTimeout(function(){
41 i = 0;
42 if(j == 0){
43 j =1;
44 //a-=10;
45 }else if(j == 1){
46 j = 3;
47 }else if(j == 2){
48 j = 0;
49 }else if(j == 3){
50 j = 2;
51 //a =10;
52 }
53 },20)
54 }
55 },200)
56 }
57 };
58 var img1 = new Image();
59 img1.src = 'imgs/game1.png';
60 var img2 = new Image();
61 img2.src = 'imgs/game2.png';
62 var img3 = new Image();
63 img3.src = 'imgs/game3.png';
64 var img4 = new Image();
65 img4.src = 'imgs/game4.png';
66 var img5 = new Image();
67 img5.src = 'imgs/game5.png';
68 var img6 = new Image();
69 img6.src = 'imgs/game6.png';
70 var img7 = new Image();
71 img7.src = 'imgs/game7.png';
72 var img8 = new Image();
73 img8.src = 'imgs/game8.png';
74 var img9 = new Image();
75 img9.src = 'imgs/game9.png';
76 var img10 = new Image();
77 img10.src = 'imgs/game10.png';
78 var img11 = new Image();
79 img11.src = 'imgs/game11.png';
80 var img12 = new Image();
81 img12.src = 'imgs/game12.png';
82 img(ctx,img1,0,0);
83 img(ctx,img2,50,0);
84 img(ctx,img3,100,0);
85 img(ctx,img4,150,0);
86 img(ctx,img5,200,0);
87 img(ctx,img6,250,0);
88 img(ctx,img7,300,0);
89 img(ctx,img8,350,0);
90 img(ctx,img9,0,100);
91 img(ctx,img10,50,100);
92 img(ctx,img11,100,100);
93 img(ctx,img12,150,100);
94 </script>
95 </html>
更多專業前端知識，請上 【猿2048】www.mk2048.com
/這邊是自己封裝了一個函數，其實從性能優化的角度來考慮，我們可以先在內存中創建一個canvas標簽，將這個圖畫放在內存中的canvas里面，再將內存中創建好的canvas放到頁面上的這個canvas標簽上，這只是一個思路，希望大家可以往這方面考慮
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的利用canvas来绘制一个会动的图画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 有趣的js匿名函数写法（function
- 下一篇： npm dev run 报错