Canvas en HTML5: la Suppression Précédente Rectangle

J'ai été déconner avec l'élément canvas en html5, et c'est ce que j'ai obtenu après un peu d'expérimentation

function canvasMove(e) {

    var canvas = document.getElementById('game');

    if(canvas.getContext) {
        var draw = canvas.getContext('2d');

        draw.fillStyle = 'rgba(0,0,0,0.5)';
        draw.fillRect('10', '10', '100', '100');    

        var code;

        if (!e) var e = window.event;
        if (e.keyCode) code = e.keyCode;
        else if (e.which) code = e.which;
        var character = String.fromCharCode(code);

        if(character == '&') { draw.translate(0, -10); }
        if(character == '(') { draw.translate(0, 10); }
        if(character == '%') { draw.translate(-10, 0); }
        if(character == "'") { draw.translate(10, 0); }
    }
}

Ce qu'il ne se déplace le rectangle à chaque fois que vous appuyez sur les touches fléchées [touches Fléchées apparaissaient comme &, (, % et", ne sais pas si c'est la même chose pour tout le monde mais c'est juste une expérience]. De toute façon, je peux déplacer le rectangle, mais il laisse une sorte de résidu, comme s'il ne le supprime pas de la forme précédente, de sorte que ce que je reçois sont très basiques, etch-n'-de l'esquisse à l'aide d'un très épais pinceau.

Ce que je veux faire est d'être en mesure de supprimer la précédente forme de rectangle, de sorte que seule la nouvelle version traduite est à gauche.

Sur le dessus de cela, je voudrais savoir comment faire pour faire bouger dire, horizontalement, en appuyant sur peut-être de gauche et simultanément. Je suis conscient que mon code n'est probablement pas très polyvalent, mais toute aide nous a beaucoup apprécié.

Merci 🙂

InformationsquelleAutor Johnny | 2010-08-05

J'ai fait un exemple pour vous. Votre code HTML est d'appeler ma fonction init (). J'ai utilisé:

<body onLoad="init()">

Laissez-moi savoir si vous avez des problèmes avec elle

var canvas;
var draw;

var WIDTH;
var HEIGHT;

var x = 10;
var y = 10;

//in my html I have <body onLoad="init()">
function init() {
    canvas = document.getElementById('game');
    HEIGHT = canvas.height;
    WIDTH = canvas.width;
    draw = canvas.getContext('2d');

    //every 30 milliseconds we redraw EVERYTHING.
    setInterval(redraw, 30);

    //canvas.keydown = canvasMove;

    document.onkeydown = canvasMove; 
}

//wipes the canvas context
function clear(c) {
    c.clearRect(0, 0, WIDTH, HEIGHT);
}

//clears the canvas and draws the rectangle at the appropriate location
function redraw() {
    clear(draw);
    draw.fillStyle = 'rgba(0,0,0,0.5)';
    draw.fillRect(x, y, '100', '100');   
}

function canvasMove(e) {
  if(e.keyCode == '38') { y -= 1; }
  if(e.keyCode == '40') { y += 1; }
  if(e.keyCode == '37') { x -= 1; }
  if(e.keyCode == "39") { x += 1; }
}

Ha, je l'ai eu à travailler par la suite, mais de la comparaison de votre code à la mienne, la mienne vient à travers une terrible compliqué. Merci 🙂

InformationsquelleAutor Simon Sarris

0

Pour répondre à la première question, voici une fonction pour effacer une toile. Un est une référence à l'élément canvas bien que vous puissiez modifier les paramètres qu'il faut. Vous devez appeler cette chaque fois avant de tracer un rectangle.
```
function clear(a){
    a.getContext('2d').clearRect(0,0,a.width,a.height);
}
```
Je pense que dans la deuxième question que vous vouliez déplacer à un angle. Pour autant que je sais que ce serait un peu difficile parce que vous auriez enregistrement de la pression sur la touche, puis de définir un délai d'attente pour voir si un autre a été pressée dans un certain laps de temps. Puis créer une fonction pour déplacer les deux de ces directions ou un seul si pas d'autres touches fléchées été pressé. Droit maintenant, votre fonction genre de travail si les deux clés ont été pressés, mais le rectangle serait jerk gauche puis vers le haut.
- hmm, il ne semble pas y avoir de travail. Je suis à l'appel de cette fonction lorsque l'utilisateur appuie sur une touche, comme avant de me traduire le rectangle. Est ce que le droit?
- Je suis un peu confus sur la façon dont votre code est censé fonctionner. Mais le problème, c'est lorsque vous appelez clair vous avez besoin de tirer le clearRect dans le coin supérieur gauche. Parce que vous traduisez le point d'origine il n'est pas de dessin à partir de là. Vous allez avoir besoin d'une méthode de dessin de la clearRect à l'origine 0,0. Une méthode qui vient à l'esprit est qu'au lieu de traduire l'origine enregistrer var x et y de la position de départ. Ensuite, lorsque l'utilisateur appuie sur une touche fléchée pour manipuler les valeurs comme vous le faisiez lors de la traduction de l'origine. Ensuite, dessinez le rectangle à la position à l'aide de x et y.
InformationsquelleAutor qw3n

Vous devez vous connecter pour publier un commentaire.