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);/**/



  • 相关阅读:
    细说java平台日志组件
    linux远程执行命令
    linux命令 common 文件比较
    Linux Shell脚本编程--cut命令
    linux sort命令
    shell中if判断一个变量为空
    linux shell if参数
    wc命令
    date 命令
    let 与 expr Shell运算比较 let强强胜出
  • 原文地址:https://www.cnblogs.com/litao229/p/2428977.html
Copyright © 2011-2022 走看看