html5 移动画布,html5画布移动元素(html5 canvas move element)

html5画布移动元素(html5 canvas move element)

我正在用HTML5和JS开发赛车游戏。 我正在尝试使用箭头键移动汽车。 但它不起作用。

如何移动画布中的元素，并且在移动元素之前是否需要清除整个画布窗口？

码：

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

var yCoordinate = 115;

var canvasWidth = canvas.width;

var canvasHeight = canvas.height;

var distance = 10;

var speed = 0.5;

var angle = 25;

var car = new Image();

car.src = "./images/p1.png";

startGame();

function startGame(){

requestAnimationFrame(moveLane);

}

function moveLane(){

clearCanvas();

drawCar();

drawLane(10 - yCoordinate);

drawLane(60 - yCoordinate);

drawLane(110 - yCoordinate);

//speed of the lane

yCoordinate = yCoordinate - 0.4;

//if lane crossed the bottom boundrary then reset the y co-ordinate

if (yCoordinate <= -145){

yCoordinate = 115;

}

requestAnimationFrame(moveLane);

}

function drawCar(){

context.drawImage(car, canvasWidth/2, canvasHeight/4, car.width*0.4, car.height*0.13);

setCarControls();

}

function moveCarLeft(){

clearCanvas();

var x = canvasWidth/2 - distance;

context.drawImage(car, x, canvasHeight/4, car.width*0.4, car.height*0.13);

}

function drawLane(yCoordinate){

context.fillStyle = "#ffffff";

context.fillRect(canvasWidth/2, yCoordinate, 10, 20);

}

function clearCanvas(){

context.clearRect(0, 0, canvasWidth, canvasHeight);

}

function setCarControls() {

document.addEventListener('keydown', function(e){

switch(e.keyCode){

case 37:

console.log('left');

requestAnimationFrame(moveCarLeft);

break;

case 38:

console.log('up');

break;

case 39:

console.log('right');

break;

case 40:

console.log('down');

break;

}

});

}

I am working on a car racing game in HTML5 and JS. I am trying to move car using arrow keys. But it's not working.

How would you move an element in the canvas and is there any need to clear the entire canvas window before moving an element?

Code:

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

var yCoordinate = 115;

var canvasWidth = canvas.width;

var canvasHeight = canvas.height;

var distance = 10;

var speed = 0.5;

var angle = 25;

var car = new Image();

car.src = "./images/p1.png";

startGame();

function startGame(){

requestAnimationFrame(moveLane);

}

function moveLane(){

clearCanvas();

drawCar();

drawLane(10 - yCoordinate);

drawLane(60 - yCoordinate);

drawLane(110 - yCoordinate);

//speed of the lane

yCoordinate = yCoordinate - 0.4;

//if lane crossed the bottom boundrary then reset the y co-ordinate

if (yCoordinate <= -145){

yCoordinate = 115;

}

requestAnimationFrame(moveLane);

}

function drawCar(){

context.drawImage(car, canvasWidth/2, canvasHeight/4, car.width*0.4, car.height*0.13);

setCarControls();

}

function moveCarLeft(){

clearCanvas();

var x = canvasWidth/2 - distance;

context.drawImage(car, x, canvasHeight/4, car.width*0.4, car.height*0.13);

}

function drawLane(yCoordinate){

context.fillStyle = "#ffffff";

context.fillRect(canvasWidth/2, yCoordinate, 10, 20);

}

function clearCanvas(){

context.clearRect(0, 0, canvasWidth, canvasHeight);

}

function setCarControls() {

document.addEventListener('keydown', function(e){

switch(e.keyCode){

case 37:

console.log('left');

requestAnimationFrame(moveCarLeft);

break;

case 38:

console.log('up');

break;

case 39:

console.log('right');

break;

case 40:

console.log('down');

break;

}

});

}

原文：https://stackoverflow.com/questions/50007098

更新时间：2019-12-28 23:20

最满意答案

我已经更新了小提琴。 检查。 您没有使用动态x坐标。

function moveCarLeft(){

clearCanvas();

currentX = currentX - 0.1;

context.drawImage(car, currentX, canvasHeight/4, car.width*0.4, car.height*0.13);

}

I have updated the fiddle. Check. You were not using dynamic x coordinate.

function moveCarLeft(){

clearCanvas();

currentX = currentX - 0.1;

context.drawImage(car, currentX, canvasHeight/4, car.width*0.4, car.height*0.13);

}

相关问答

第一： 硬限制取决于浏览器，而不是画布API。 即便如此，浏览器总是试图提高性能，所以这个数字总是在变化。 但使用WebGL和Canvas制作游戏时，纹理地图集/精灵地图集是HUGE .jpg / .png文件。 机会非常非常好，您的图像更小，我经常在画布上使用4MB / 5MB / 16MB图像进行演示。 一个巨大的图像(或几十个)可能会使标签崩溃，如果足够大，但直到那个时候，画布并没有真正向我抱怨。 第二： 有安全限制。 在canvas编辑照片取决于您使用的浏览器，以及该文件是否与您的网站位于

...

简短的答案： SVG对你来说会更容易 ，因为选择和移动它已经被内置了。SVG对象是DOM对象，所以他们有“点击”处理程序等。 DIV是好的，但笨重，并且在大数量的性能加载可怕 。 Canvas具有最佳性能，但您必须自己实现管理状态(对象选择等)的所有概念，或使用库。 长的答案： HTML5画布只是一个位图的绘图面。 你设置绘制(用颜色和线条厚度说)，画这个东西，然后Canvas不知道那个东西：它不知道它在哪里或你刚刚绘制的是什么，它是只是像素。 如果你想绘制矩形并让它们移动或者可以选择，那么你必须

...

您可以在绘制任何图像(旋转，缩放，平移...)之前向上下文添加变换。 你需要的是函数context.translate(x，y)。 然后，您只需要在(0,0)处绘制图像 例如，要显示图像的右下部分： ctx.translate (-424, -450);

ctx.drawImage (image, 0, 0);

您可以查看此链接https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformatio

...

该页面使用excanvas - 一个使用IE的VML渲染器模拟canvas元素的JS库。 请注意，在Internet Explorer 9中， canvas标签本身是支持的 ！ 有关详细信息，请参阅MSDN文档 ... The page is using excanvas - a JS library that simulates the canvas element using IE's VML renderer. Note that in Internet Explorer 9, the ca

...

var canvas = document.getElementById("my-canvas");

var context = canvas.getContext("2d");

context.fillStyle = "blue";

context.font = "bold 16px Arial";

context.fillText("Zibri", (canvas.width / 2) - 17, (canvas.height / 2) + 8); #my-canvas {

...

是的，它可以完成，并不是太困难。 在此处查看我的答案： 如何使用渐变贴图在画布中调整带有图像的HTML5画布。 就像在着色中一样，只需要遍历每个像素并将RGB值更改为更小(步长为8或16，而不是步长为1) 所以你可以做8个步骤： redValue = redValue - (redValue % 32) // 155 would become 128, etc

哪个应该工作，但你应该检查边缘情况。 例： http://jsfiddle.net/gbBz7/ Yes it can be done,

...

我已经更新了小提琴。 检查。 您没有使用动态x坐标。 https://jsfiddle.net/6j4c5dod/7/ function moveCarLeft(){

clearCanvas();

currentX = currentX - 0.1;

context.drawImage(car, currentX, canvasHeight/4, car.width*0.4, car.height*0.13);

}

I have updated the fiddle. Check. Yo

...

你有没有尝试过： $("canvas").animate({

left: 0px //Just an example

}, "slow");

上面的例子需要jquery from http://www.urbaninsight.com/2013/01/04/improving-html5-app-performance-gpu-accelerated-css-transitions If I'd change the top & left coordinates to do s

...

问题在于，您正在尝试在呈现之前访问canvas 。 固定： Template.test.rendered = function(){

var canvas = $("#canvas1");

canvas.css('width', $(window).innerWidth());

canvas.css('height', $(window).innerHeight());

var context = canvas[0].getContext('2d');

//

...

使用keymap对象可以更轻松... if ( !window.requestAnimationFrame ) {

window.requestAnimationFrame = ( function() {

return window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

win

...