Die neu hinzugefügte Leinwand von Html5 ist eine leistungsstarke Funktion. Es wird geschätzt, dass sie jeden Tag verwendet wird. Sie wird jedoch gelegentlich zum Synthetisieren von Bildern verwendet chaotisch, daher wurde die Speicherfunktion für häufig verwendete Leinwandzeichnungen und Textzeichnungen gekapselt, und ich bin damit derzeit recht zufrieden. Sie kann Aufgaben zur Leinwandzeichnung schnell erledigen und ruhig auf Änderungen der Anforderungen reagieren.
li-canvas.jsDie Canvas-Funktion von Html5 ist gekapselt, um Funktionen wie Einzelbild, Mehrbildzeichnung, Bildzeichnung mit abgerundeten Ecken, mehrzeiliges Textzeichnen, automatischen Zeilenumbruch, Bildspeicherung und -herunterladen usw. zu ermöglichen.
Github-Adresse: github.com/501351981/l…
Hauptfunktionen•Bildzeichnung: Einzelbild-/Mehrfachbildzeichnung, Bildzeichnung mit abgerundeten Ecken. •Textzeichnung: Textzeichnung mit mehreren Absätzen, automatischer Zeilenumbruch .
npm installieren# npm install npm install --save li-canvasdirektes Zitat
Importieren Sie JS-Dateien direkt in HTML.
<script src=dist/li-canvas.js></script>Wie zu verwenden Instanziieren
Wenn Sie Li-Canvas verwenden, müssen Sie zuerst das Objekt instanziieren, new LiCanvas(canvas_id,options), die ID des Canvas übergeben, Optionen sind optional, Sie können den Canvas-Hintergrund und den Standardtextstil festlegen usw.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180></canvas><script> var canvas= neues LiCanvas('test') </script></body> ... Bildzeichnung•Zeichnen Sie ein einzelnes Bild
Rufen Sie addDrawImageTask(image) auf, wobei der Parameter image ein Objekt ist, einschließlich
src: URL-Adresse des Bildes
x: Die x-Koordinate der oberen linken Ecke des Bildes auf der Leinwand
y: Die y-Koordinate der oberen linken Ecke des Bildes auf der Leinwand
Breite: Bildzeichnungsbreite
Höhe: Bildzeichnungshöhe
borderRadius: Eckenradius des Bildes
Wenn addDrawImageTask(image) aufgerufen wird, wird das Bild nicht sofort gezeichnet, sondern eine Zeichenaufgabe hinzugefügt. Die Zeichenaufgabe wird nur ausgeführt, wenn draw(callback) aufgerufen wird, und die Callback-Funktion wird aufgerufen, wenn die Ausführung abgeschlossen ist.
Warum das tun? Da das Bild beim Zeichnen zuerst heruntergeladen werden muss, handelt es sich um einen asynchronen Vorgang. Daher wird es zuerst zur Aufgabenliste hinzugefügt und beim Aufruf von draw () in der Reihenfolge ausgeführt, in der die Aufgaben hinzugefügt werden.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px durchgehend rot></canvas><img src=./bg.jpg id=img width=0 height=0><script> var bg={ src:document.getElementById('img').src,//oder die URL-Adresse des Bildes x:0,//x-Koordinate der oberen linken Ecke y:0,//y-Koordinate der oberen linken Ecke Eckbreite:1563,/ /Bildzeichnungsbreite Höhe:1180,//Bildzeichnungshöhe borderRadius:0 //Bildeckenradius} var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) //Fügen Sie eine Zeichenaufgabe hinzu und die Zeichnung wird nicht sofort ausgeführt. canvas.draw(()=>{ console.log(drawing abgeschlossen) }) </script></body> ...•Zeichnen Sie mehrere Diagramme
Sie können addDrawImageTask(image) mehrmals hintereinander aufrufen oder ein Array von Bildern übergeben.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px durchgehend rot></canvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, width:1563, height:1180, borderRadius:0 } var img2={ src:http://*****.com/***.png, x:0, y:0, width: 1563, height:1180, borderRadius:0 } var imgs=[ { src:http://*****.com/***.png, x:0, y:0, width:100, height:100, borderRadius:0 }, { src:http://*****.com/***.png, x:0, y:0, width:100, height:100, borderRadius:0 } ] var canvas=new LiCanvas('test') canvas.addDrawImageTask(img1) canvas.addDrawImageTask(img2) //Mehrere Aufrufe, um das Zeichnen mehrerer Bilder zu erreichen. canvas.addDrawImageTask(imgs) //Das Zeichnen mehrerer Bilder kann auch durch direkte Übergabe eines Arrays erreicht werden. canvas.draw(()=>{ console.log(drawing abgeschlossen) }) </script> </body> ...•Zeichnen Sie abgerundete oder kreisförmige Bilder
Legen Sie einfach borderRadius fest
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px durchgehend rot></canvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, width:100, height:100, borderRadius:50 //Legen Sie den Verrundungsradius fest. Wenn der Verrundungsradius die halbe Seitenlänge des Quadrats beträgt, handelt es sich um einen Kreis} var canvas=new LiCanvas('test') Canvas .addDrawImageTask(img1) Canvas.draw(()=>{ console.log(Zeichnung abgeschlossen) }) </script></body> ... Text zeichnen•Zeichnen Sie einen Text
Rufen Sie addDrawTextTask(text,style) auf.
Text: Zu zeichnender Text
Stil: Textstil, einschließlich x: Koordinate x der oberen linken Ecke der Startposition der Textzeichnung
y: Die y-Koordinate der oberen linken Ecke der tatsächlichen Position der Textzeichnung
Breite: Die Breite einer Textzeile. Wenn sie die Breite überschreitet, wird sie automatisch umbrochen.
Schriftgröße: Textgröße, Ganzzahl, Einheit ist px
FontWeight: Textstärke fett, fetter usw. oder 400, 500, 600 ... dasselbe wie CSS-Schriftstärke
FontFamily: Textschriftart, genau wie CSS
lineHeight: Zeilenhöhe, Ganzzahl, Einheit px
Farbe: Farbe
marginBottom: Wenn es mehrere Textabsätze gibt, können Sie auch den Abstand zwischen den Absätzen angeben
Das Zeichnen von Text erfolgt ebenfalls asynchron. Es wird erst dann tatsächlich gezeichnet, wenn draw(callback) aufgerufen wird.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px einfarbig rot></canvas><script> var canvas=new LiCanvas('test') canvas.addDrawTextTask(zu zeichnender Text, { x:110, y:496, Breite:1340, Schriftgröße:54, Schriftgewicht:'bolder', Schriftfamilie:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 }) canvas.draw(()=>{ console.log(Zeichnung abgeschlossen) }) </script></body> ...•Zeichnen Sie mehrere Textabsätze
Methode 1: Rufen Sie addDrawTextTask(text, style) wiederholt auf, wie oben
Methode 2: Text kann in einem Array übergeben und der Stil kann gemeinsam genutzt werden
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px durchgehend rot></canvas><script> var canvas=new LiCanvas('test') canvas.addDrawTextTask([Zu zeichnender Textabsatz 1, Zu zeichnender Textabsatz 2],{ x:110, y:496, width:1340, FontSize:54, FontWeight:'bolder', FontFamily:PingFangSC-Regular,' Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 }) canvas.draw(()=>{ console.log(drawing abgeschlossen) }) </script></body> ...Der Stil kann beim Instanziieren des Objekts auch einen Standardwert übergeben, um zu vermeiden, dass einige gemeinsame Stile wiederholt festgelegt werden.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px einfarbig rot></canvas><script> var canvas=new LiCanvas('test',{ FontStyle:{ FontSize:20, fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 } }) canvas.addDrawTextTask (zu zeichnender Textabsatz 1,{ x:110, y:496, Breite:1340, }) canvas.addDrawTextTask(Zu zeichnender Textabsatz 2,{ x:110, y:696, width:1340, }) canvas.draw(()=>{ console.log(Zeichnung abgeschlossen) }) </script></ Körper> ...Wenn es in mehreren Absätzen einen Textabsatz gibt, der in unterschiedlichen Stilen festgelegt werden muss, können Sie den Stil wie folgt auch separat angeben, da dies sehr flexibel ist ~
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px durchgehend rot></canvas><script> var canvas=new LiCanvas('test',{ FontStyle:{ FontSize:20, FontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 } }) canvas.addDrawTextTask([{ text:To Gezeichneter Absatztext 1, Schriftgröße: 60 }, zu zeichnender Textabsatz 2, zu zeichnender Textabsatz 3],{ x:110, y:496, width:1340, }) canvas.draw(()=>{ console.log(Zeichnung abgeschlossen) }) </script></body> ...Downloadbild speichern
•Bilder herunterladen
Als PNG-Bild herunterladen: saveToPng(Dateiname)
Als JPEG-Bild herunterladen: saveToJpeg(Dateiname)
Als GIF-Bild herunterladen: saveToGif (Dateiname)
Hinweis: Das Herunterladen von Bildern muss in der Rückruffunktion von draw() aufgerufen werden, damit es wirksam wird.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px durchgehend rot></canvas><script> var bg={ src:http://***.jpg, x:0, y:0, width:1563, height:1180, borderRadius:0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) canvas.draw(()=>{ canvas.saveToPng(li-canvas) }) </script ></body> ...•Bilddaten abrufen
Manchmal möchten wir das Bild nicht herunterladen. Im WeChat-Browser möchten wir beispielsweise, dass der Benutzer lange auf das Bild drückt, um es zu speichern. Zu diesem Zeitpunkt möchten wir, dass die von Canvas synthetisierten Bilddaten eingefügt werden die Quelle von img.
Rufen Sie getImageData() auf, um die synthetisierten Bilddaten abzurufen
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px durchgehend rot></canvas><img src=./bg.jpg id=img ><script> var bg={ src:http://***.jpg, x:0, y:0, width:1563, height:1180, borderRadius:0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) Canvas. draw(()=>{ var src=canvas.getImageData() document.getElementById('img').src=src }) </script></body> ...Github-Adresse: github.com/501351981/l…
ZusammenfassenDas Obige stellt Ihnen vor, wie Sie mit Li-Canvas auf einfache Weise einzelne Bilder, mehrere Bilder, Bilder mit abgerundeten Ecken, einzeiligen Text, mehrzeiligen Text usw. realisieren können Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!