javascript - canvas 实现一张图片 旋转下落

问题描述

问 题

var canvas = document.getElementById('canvas');
var  ctx = canvas.getContext("2d");
var img = new Image(),i = 1;
    img.crossOrigin = "anonymous";
    img.src = 'http://s18.mogucdn.com/p2/160804/upload_632bjgig656cech975lk32kebbe53_230x440.png';
    img.onload = function(){
       
        setInterval(function(){
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img,200,i);
            ctx.translate(315,i+220);
            ctx.rotate(i* Math.PI / 180);
            ctx.translate(-315,-i-220);
            i++;

        },160);
    }
    
     这样好像只会原地旋转

解决方案

<canvas id="canvas" width='800' height='800'></canvas>

---

var canvas = document.getElementById('canvas');
var  ctx = canvas.getContext("2d");
var img = new Image(),i = 1;
    img.crossOrigin = "anonymous";
    img.src = 'http://s18.mogucdn.com/p2/160804/upload_632bjgig656cech975lk32kebbe53_230x440.png';
    img.onload = function(){
           var imgW = img.width, imgH = img.height, posx = 100;
        setInterval(function(){
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.save();
            ctx.translate(posx + imgW/2,imgH/2+i);
            ctx.rotate(i* Math.PI / 180);
            ctx.translate(-posx -imgW/2,-imgH/2-i);
            ctx.drawImage(img, posx, i);
            ctx.restore();
            i++;

        },16);
    }

这篇关于javascript - canvas 实现一张图片 旋转下落的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！