zoukankan      html  css  js  c++  java
  • canvas中来做元素的旋转移动

     一张 图片,在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);/**/



  • 相关阅读:
    iOS开发--CoreGraphics简单绘图
    iOS开发--UITableView
    PowerDesigner
    使用jquery-qrcode生成二维码
    MVC中如何设置路由指定默认页
    项目管理
    版本管理
    如何在网页中嵌入百度地图
    asp.net网站中添加百度地图功能
    TCP/UDP简易通信框架源码,支持轻松管理多个TCP服务端(客户端)、UDP客户端
  • 原文地址:https://www.cnblogs.com/litao229/p/2428977.html
Copyright © 2011-2022 走看看