Kürzlich habe ich einige neue Elementattribute von HTML5 untersucht und festgestellt, dass sie wirklich einfach zu verwenden sind, insbesondere das neue Tag-Element Canvas. Offizielle Einführung: Canvas API (Canvas) ist ein neues Tag in HTML5, das zum Generieren von Bildern in Echtzeit auf Webseiten verwendet wird und Bildinhalte manipulieren kann. Im Grunde handelt es sich um eine Bitmap, die mit JavaScript manipuliert werden kann. Im Folgenden wird JavaScript in Kombination mit Canvas verwendet, um eine Zeichenbrettfunktion zu implementieren
Wirkungsdemonstrationsbild:
Codeteil (direkt kopieren und verwenden)
<!DOCTYPE HTML><html><head> <meta charset=utf-8 /> <title>JavaScript+Canvas implementiert ein benutzerdefiniertes Zeichenbrett</title></head><body><canvas id=canvas width=600 height =300></canvas><script type=text/javascript> var canvas = document.getElementById(canvas); var ctx = canvas.getContext(2d); //Zeichne ein schwarzes Rechteck ctx.fillStyle=black; ctx.fillRect(0,0,600,300); //Drücken Sie die Markierung var onoff = false; //Die Variablen oldx und oldy stellen die Koordinaten dar, bevor sich die Maus bewegt var oldx = -10 ; var oldy = -10; //Lege die Farbe fest var linecolor = white; //Mausbewegungsereignis hinzufügen canvas.addEventListener(mousemove,draw,true); //Der dritte Parameter bezieht sich hauptsächlich auf das Erfassen oder Sprudeln //Mausdruckereignis hinzufügen canvas.addEventListener(mousedown,down,false); up event canvas.addEventListener(mouseup,up,false); function down(event){ oldx = event.pageX-10; event.pageY-10; //console.log(event.pageX+'............000.............'+event.pageY) / /event.pageX und event.pageY sind relativ zur Mausposition der gesamten Seite einschließlich des Überlaufteils (d. h. der Bildlaufleiste) } function up(){ onoff = false } function draw(event){ if(onoff == true) { var newx = event.pageX-10; var newy = event.pageY-10; ctx.beginPath();//beginPath() Verwirft jeden aktuell definierten Pfad und beginnt einen neuen. Es setzt den aktuellen Punkt auf (0,0). ctx.moveTo(oldx,oldy); //Beim Klicken zur Koordinate bewegen, mit dieser Koordinate als Ursprung ctx.lineTo(newx,newy); //Zeichne einen neuen Pfad ctx.lineWidth=linw ; ctx.lineCap=round; ctx.Stroke();//Die Methode Stroke() zeichnet tatsächlich den durch die Methoden moveTo() und lineTo() definierten Pfad. Die Standardfarbe ist Schwarz. //Weisen Sie die neue Mausposition der Startkoordinate der nächsten Zeichnung zu start oldx = newx };</script></body></html>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.