一张 图片，在canvas中 怎么 做 旋转 同时移动，直接上demo先。用chrome才看的到哦亲
-----------------------------我是可爱的源码分割线------------------------------------
1 var width = 600;
2 var height = 300;
3 var imgs = [];
4
5 var X = 74, Y = 74;
6 var X1=452,Y1=74;
7 var rotation=0;
8 var rotation1=0
9
10 var regx = 74;
11 var regy = 42;
12 var iwidth = 148;
13 var iheight = 84;
14
15 var canvas = document.getElementById('myCanvas');
16 var ctx = canvas.getContext('2d');
17
18 var img = new Image();
19 img.onload = function(){
20 imgs.push(this);
21 imgs.push(this);
22 };
23 img.src = 'buy.png';
24
25 function loop(){
26 ctx.clearRect(0, 0, width, height);
27 for(var i = 0; i < imgs.length; i++){
28 if (i==0){
29 var img = imgs[i];
30 ctx.save();
31 rotation += 6;
32 if( X != 0 || Y != 0 ) ctx.translate( X , Y );
33 if( rotation % 360 != 0) ctx.rotate( rotation%360 * (Math.PI / 180) );
34 if( regx != 0 || regy != 0 ) ctx.translate( -regx, -regy );
35
36 X += 6;
37 if (X>=452){
38 X -= 6;
39 }
40 ctx.drawImage( img , 0, 0 , iwidth,iheight, 0 , 0 , iwidth, iheight);
41 ctx.restore();
42 }
43 if (i==1){
44 var img1=imgs[i];
45 ctx.save();
46 rotation1 -=15;
47
48 if( X1 != 0 || Y1 != 0 ) ctx.translate( X1 , Y1 );
49 if( rotation1 % 360 != 0) ctx.rotate( rotation1%360 * (Math.PI / 180) );
50 if( regx != 0 || regy != 0 ) ctx.translate( -regx, -regy );
51
52 X1 -= 6;
53 if (X1<=74){
54 X1 += 6;
55 }
56
57 ctx.drawImage( img1 , 0, 0,iwidth , iheight,0,0 , iwidth, iheight);
58 ctx.restore();
59 }
60 };
61 }
62
63 window.setTimeout(function(){
64 setInterval(loop, 1000 / 24);
65 },500);/**/
posted on
