Beispielcode zum Erstellen eines Zeichenprogramms mit HTML5-Canvas und JavaScript

Der folgende Editor zeigt Ihnen ein einfaches Beispiel für die Erstellung eines Zeichenprogramms mit HTML5s Canvas und JavaScript. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Editor und werfen wir einen Blick darauf

Dieser Artikel führt Sie durch die Erstellung eines einfachen Zeichenprogramms mit Canvas und JavaScript.

Bereiten Sie zuerst das Container-Canvas-Element vor, dann wird alles in JavaScript erledigt.

XML/HTML Code复制内容到剪贴板
<canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>

Rufen Sie die Zeichenumgebung ab. Das Kontextobjekt stellt Methoden und Eigenschaften zum Zeichnen auf der Leinwand bereit.

context = document.getElementById('canvasInAPerfectWorld').getContext("2d");

Zeichnen starten Prozess

Zuerst müssen wir die Koordinaten des Zeichnungspfadpunkts speichern. Die Funktion addClick fügt den Koordinatenpunktwert zum Array hinzu.

var clickX = new Array();   
var clickY = new Array();   
var clickDrag = new Array();//存储路径点 
var paint;//是否绘制，mousedown时置为true 
function addClick(x, y, dragging)   
{   
  clickX.push(x);   
  clickY.push(y);   
  clickDrag.push(dragging);   
}

Die Redraw-Funktion zeichnet das Ganze neu Canvas jedes Mal, wenn es aufgerufen wird. Zuerst löschen wir den Inhalt auf der Leinwand und legen die Linienfarbe, -stärke und die Linienverbindungsmethode fest. Dann

zeichnen Sie einen Pfad zwischen den beiden Punkten und zeichnen Sie die Koordinatenpunkte im Array nacheinander

function redraw(){   
  context.clearRect(0, 0, context.canvas.width,   context.canvas.height); // 清除画布内容   
  context.strokeStyle = "#df4b26";//设置线条颜色   
  context.lineJoin = "round";//当两条线条交汇时，创建圆形边角   
  context.lineWidth = 5;//线条粗细   
  for(var i=0; i < clickX.length; i++) {           
    context.beginPath();//开始一条路径，或重置当前的路径   
    if(clickDrag[i] && i){   
      context.moveTo(clickX[i-1], clickY[i-1]);   
     }else{   
       context.moveTo(clickX[i]-1, clickY[i]);   
     }   
     context.lineTo(clickX[i], clickY[i]);   
     context.closePath();   
     context.stroke();//绘制路径   
  }   
}

Für den Zeichenvorgang erforderliche Ereignisse

1 Mousedown-Ereignis

Wenn Sie diesen Klick auf die Leinwand zeichnen, wird die Ausführung dieses Ereignisses ausgelöst. Die Funktion addClick wird aufgerufen und paint auf true gesetzt.

$('#canvas').mousedown(function(e){   
  var mouseX = e.pageX - this.offsetLeft;   
  var mouseY = e.pageY - this.offsetTop;   
  paint = true;   
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);   
  redraw();   
});

• 
  

2 Mousemove-Ereignis

Nachdem die in Mousedown eingestellte Farbe wahr ist, wird die Ausführung des Mousemove-Ereignisses ausgelöst, wenn sich die Maus bewegt, alle von der Maus bewegten Punkte werden aufgezeichnet und das Neuzeichnen wird kontinuierlich aufgerufen um die Leinwand neu zu zeichnen.

$('#canvas').mousemove(function(e){   
   if(paint){   
     addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);   
     redraw();   
   }   
 });

3 Mouseup-Ereignis

Mouseup-Mausklick und -Loslassen oder Ziehen und Loslassen, um anzuzeigen, dass die Zeichnung abgeschlossen ist Pfad , setze paint auf false.

$('#canvas').mouseup(function(e){   
   paint = false;   
 });

4 Mouseleave-Ereignis

Mouseleave-Maus verlässt das Canvas-Element und setzt Farbe auf „False“.

$('#canvas').mouseleave(function(e){   
  paint = false;   
});

Das obige ist der detaillierte Inhalt vonBeispielcode zum Erstellen eines Zeichenprogramms mit HTML5-Canvas und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!