如何使用设备运动使画布动画随手机移动答案

【问题标题】：How to make canvas animation move with phones using device motion如何使用设备运动使画布动画随手机移动
【发布时间】：2019-10-16 17:52:01
【问题描述】：

我已经成功地为我的画布创建了一个旋转动画，但现在我想添加一个设备运动的事件处理程序，以使我的画布在我移动手机时移动。例如：现在我将画布平移到屏幕的中间点并开始旋转。当我将手机向左移动时，我希望我的中间点向左移动，反之亦然，因为我将手机向右移动。

我尝试将事件处理程序添加到我的移动函数并使用 event.accelerationIncludingGravity.x 设置画布翻译的起点，但它不起作用。我认为有问题的部分是cxt.translate(c.width / 2 - x, c.height / 2 - y); 有人可以告诉我如何做到这一点吗？这是我的代码：

const c = document.getElementById("canvas");
c.width = window.innerWidth;
c.height = window.innerHeight;
const cxt = c.getContext('2d');

function draw() {
    var x1 = 0;
    var y1 = 80;
    var x2 = 80;
    var y2 = 0;
    var w = 240;
    var h = 80;

for (var i = 0; i < 4; i++) {
    cxt.fillStyle = "orange";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 -= 80;
    y1 += 160;
    x2 -= 80;
    y2 += 160;

    cxt.fillStyle = "darkred";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 += 240;
    y1 -= 80;
    x2 += 240;
    y2 -= 80;

    cxt.fillStyle = "black";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 -= 80;
    y1 += 160;
    x2 -= 80;
    y2 += 160;

    cxt.fillStyle = "blue";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 += 240;
    y1 -= 80;
    x2 += 240;
    y2 -= 80;

    cxt.fillStyle = "green";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 -= 80;
    y1 += 160;
    x2 -= 80;
    y2 += 160;

    cxt.fillStyle = "yellow";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 += 240;
    y1 -= 80;
    x2 += 240;
    y2 -= 80;
}


}

function fill() {
draw();
cxt.save();

cxt.translate(0, 400);
draw();
cxt.restore();
cxt.save();

cxt.translate(160, -320);
draw();
cxt.restore();
cxt.save();

cxt.translate(960, -320);
draw();
cxt.restore();
cxt.save();

cxt.translate(-1920, -960);
draw();
cxt.restore();
cxt.save();

cxt.translate(-480, 160);
draw();
cxt.save();

cxt.translate(-480, -1440);
draw();
cxt.save();

cxt.translate(-640, 80);
draw();
cxt.save();

cxt.translate(-640, 480);
draw();
cxt.save();
}

var degree = 0;
var requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
                        window.msRequestAnimationFrame;

function move(event) {
var x = event.accelerationIncludingGravity.x;
var y = event.accelerationIncludingGravity.y;

cxt.setTransform(1, 0, 0, 1, 0, 0);
cxt.clearRect(0, 0, c.width, c.height);

cxt.translate(c.width / 2 - x, c.height / 2 - y);
cxt.rotate(degree);
fill();

degree += 0.01;

requestAnimationFrame(move);
}

move(event);

window.addEventListener("devicemotion", move, true);

【问题讨论】：

你最好使用 canvascontext.rotate 而不是 translate w3schools.com/tags/canvas_rotate.asp 为什么在用户旋转设备时需要翻译图像？
教授希望我们用画布动画实现设备运动只是一个家庭作业。我确实使用了 context.rotate 但我只是使用 translate 让它从屏幕中间旋转。

标签： javascript html animation canvas devicemotion

【解决方案1】：

使用 deviceMotionEvent.rotationRate 而不是加速。

https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent/rotationRate

window.addEventListener("devicemotion", updateCanvas, true);


   function updateCanvas(event) {
         var rotation = event.rotationRate.gamma;
         requestAnimationFrame(rotateAndTranslate);


   }


   function rotateAndTranslate(rotation) {



          cxt.rotate(rotation);

         cxt.setTransform(1, 0, 0, 1, 0, 0);
         cxt.clearRect(0, 0, c.width, c.height);

         cxt.translate(c.width / 2 - x, c.height / 2 - y);
         fill();






        }

【讨论】：