Artikel ini membagikan kode papan gambar yang diimplementasikan oleh HTML5 Canvas untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> demo6: custom artboard </title> </adebu> <body> <canvas id = "canvas"> Browser tidak mendukung Canvas <!-Jika teks ini tidak didukung, itu akan ditampilkan-> </Canvas <! onclick='linecolor="yellow";'>YELLOW</button><button onclick='linecolor="red";'>RED</button><button onclick='linecolor="blue";'>BLUE</button><button onclick='linecolor="green";'>GREEN</button><button onclick='linecolor="white";'>WHITE</button><button onclick='linecolor="black";'>BLACK</button><br/> <button onclick="linw=4;">4PX</button><button onclick="linw=8;">8PX</button><button onclick="linw=16;">16PX</button><br/> <button onclick="copyimage();">EXPORT</button> <br/> <img src = "" id = "image_png"> <br/> <script type = "text/javascript"> var canvas = document.geteLementById ('canvas'); // Dapatkan tag var ctx = canvas.getContext ("2d"); var fillstyle = "hitam"; ctx.fillrect (0,0,600,300); var onoff = false; // tekan tag var oldx = -10; var Oldy = -10; // atur warna var linecolor = "putih"; var linw = 4; canvas.addeventlistener ("mousemove", draw, true); // Acara Gerakan Mouse Canvas.addeventListener ("Mousedown", Down, False); // Mouse Press Event Canvas.addeventListener ("MouseUp", Up, False); // Mouse Pop-Up Event Function Down (event) {onoff = true; oldx = event.pagex - 10; Oldy = event.pagey - 10; } function up () {onoff = false; } function draw (event) {if (onoff == true) {var newx = event.pagex - 10; var newy = event.pagey - 10 ctx.beginpath (); ctx.moveto (oldx, oldy); ctx.lineto (newx, newy); ctx.strokestyle = linecolor; ctx.linewidth = linw; ctx.linecap = "bulat"; ctx.stroke (); oldx = newx; Oldy = newy; }} fungsi copyImage (event) {var img_png_src = canvas.todataurl ("gambar/png"); // fungsi yang menyimpan artboard sebagai format gambar.getElementById ("image_png"). Src = img_png_src; } </script> </body> </html>Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.