Canvas in HTML5: Entfernen der Vorherigen Rechteck

Ich ve wurde Herumspielen mit dem canvas-element in html5, und das ist, was ich habe, nach ein bisschen Experimentieren

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); }
    }
}

Was es tut, ist, bewegt sich das Rechteck, wenn Sie drücken Sie die Pfeiltasten [Pfeil-Tasten waren, zeigt sich als &, (, % und ', nicht sicher, ob dies für alle gleich ist, aber es ist nur ein experiment]. Wie auch immer, ich kann das Rechteck verschoben, aber es hinterlässt eine Art Rückstand, wie in es nicht löschen Sie die bisherige form, also das, was ich bekommen ist eine sehr einfache etch-n'-Skizze mit einem sehr dicken Pinsel.

Was ich tun möchte, ist in der Lage zu löschen der bisherigen form des Rechtecks, so dass nur die neue übersetzte version ist Links.

Oben, ich würde gerne wissen, wie zu machen, verschieben Sie sagen, "horizontal", durch drücken vielleicht Links und oben gleichzeitig. Ich bin mir bewusst, mein code ist wahrscheinlich nicht sehr vielseitig, aber jede Hilfe, die uns sehr geschätzt.

Dank 🙂

InformationsquelleAutor Johnny | 2010-08-05

Schreibe einen Kommentar