Question

我一直试图用箭头键移动一个简单的画布框。以下是代码：http://cssdeck.com/labs/stexplorer

还有：

$(function() {
  var n = 3;
  var xD = 0;
  var yD = 0;
  //var move;
	var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  var ss = {
    "x": 0,
    "y": 0,
    "width": 100,
    "height": 75
  };

  function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
	  ctx.beginPath();
	  ctx.rect(ss.x, ss.y, ss.width, ss.height);
	  ctx.lineWidth = 1;
	  ctx.strokeStyle = "black";
	  ctx.stroke();
  }

  function move() {
		x = ss.x + (xD * n);
		y = ss.y + (yD * n);
    ss.x = x;
    ss.y = y;
	}

  $(document).keydown(function(e) {
		xD = e.which == 37 ? -1 : xD;
		xD = e.which == 39 ? 1 : xD;
		yD = e.which == 38 ? -1 : yD;
		yD = e.which == 40 ? 1 : yD;
		e.preventDefault();
	});

  $(document).keyup(function(e) {
		xD = e.which == 37 ? 0 : xD;
		xD = e.which == 39 ? 0 : xD;
		yD = e.which == 38 ? 0 : yD;
		yD = e.which == 40 ? 0 : yD;
		e.preventDefault();
	});

  render();
  setInterval(move, .01);
});

body {
	margin: 0;
}

#canvas {
	border: 1px solid #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="300" height="200"></canvas>

此代码应执行以下操作：

每当我按箭头键时，框应该移动
如果我可以制作画布width = "100vw"和height = "100vh"

Answer 1

您的渲染方法最初只会被触发，您应该将其添加为move方法的最后一行，因此画布将在每次移动后渲染新位置。

function move() {
    x = ss.x + (xD * n);
    y = ss.y + (yD * n);
    ss.x = x;
    ss.y = y;
    render(); // add this line
}

Answer 2

尝试此解决方案，点击结果屏幕，然后使用键盘箭头键，如果这适用于您将我的解决方案标记为答案，请在需要时发表评论

＆＃13;

var canvas;
var ctx;
var dx = 5;
var dy = 5;
var x = 150;
var y = 100;
var WIDTH = 300;
var HEIGHT = 200;

function circle(x,y,r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.fill();
}

function rect(x,y,w,h) {
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
ctx.stroke();
}

function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
return setInterval(draw, 10);
}

function doKeyDown(evt){
switch (evt.keyCode) {
case 38:  /* Up arrow was pressed */
if (y - dy > 0){
y -= dy;
}
break;
case 40:  /* Down arrow was pressed */
if (y + dy < HEIGHT){
y += dy;
}
break;
case 37:  /* Left arrow was pressed */
if (x - dx > 0){
x -= dx;
}
break;
case 39:  /* Right arrow was pressed */
if (x + dx < WIDTH){
x += dx;
}
break;
}
}

function draw() {
clear();
ctx.fillStyle = "white";
ctx.strokeStyle = "black";
rect(0,0,WIDTH,HEIGHT);
ctx.fillStyle = "purple";
circle(x, y, 10);
}

init();
window.addEventListener('keydown',doKeyDown,true);

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Test</title>
</head>
<body>
<section>

<div>
<canvas id="canvas" width="300" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>

＆＃13;

带箭头的移动帆布盒

2 个答案: