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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Habe ich ein Beispiel für Sie. Ihre HTML-rufen meiner init () - Funktion. Verwendet habe ich:
Lassen Sie mich wissen, wenn Sie irgendwelche Probleme mit ihm
InformationsquelleAutor Simon Sarris
Zur Beantwortung der ersten Frage, hier ist eine Funktion zum löschen des canvas. A ist eine Referenz auf das canvas-element wenn Sie Bearbeiten kann, welche Parameter es braucht. Sie nennen müsste dies jedes mal, bevor Sie mit dem zeichnen eines neuen Rechtecks.
Ich denke, in der zweiten Frage, die Sie gemeint zu bewegen in einem Winkel. Soweit ich weiß wäre das ein wenig schwierig, da müsstest du record die Taste drücken, und legen Sie dann ein Zeitlimit, um zu sehen, wenn eine andere gedrückt wurde innerhalb einiger Zeit. Dann erstellen Sie eine Funktion zu bewegen, diese beiden Richtungen oder nur wenn kein anderer Pfeil-Tasten gedrückt wurden. Jetzt Ihre Funktion würde die Art von Arbeit, wenn beide-Taste gedrückt wurde, aber das Rechteck würde Ruck nach Links und dann nach oben.
Ich bin etwas verwirrt, wie der code funktionieren soll. Aber das problem ist hier, wenn Sie anrufen, klar, müssen Sie ziehen die clearRect von der linken oberen Ecke. Denn Sie übersetzen die Herkunft Punkt ist es keine Zeichnung gibt. Sie gehen zu müssen, eine Methode, mit der Zeichnung der clearRect an der ursprünglichen 0,0. Eine Methode, die mir einfällt, ist anstelle der übersetzung der Herkunft speichern var x und y in die Ausgangsposition. Dann, wenn der Benutzer drückt eine Taste, das ändern der Werte, wie Sie tun, wenn die übersetzung der Herkunft. Dann zeichnen Sie das Rechteck an die position x und y.
InformationsquelleAutor qw3n