บทความนี้แบ่งปันรหัสบอร์ดรูปภาพที่ใช้โดย HTML5 Canvas สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> demo6: artboard ที่กำหนดเอง </title> </head> <body> <canvas id = "Canvas"> เบราว์เซอร์ไม่รองรับ Canvas <!-หากข้อความนี้ไม่ได้รับการสนับสนุน onclick = 'linecolor = "สีเหลือง";'> สีเหลือง </ปุ่ม> <ปุ่ม onclick = 'linecolor = "สีแดง";'> สีแดง </ปุ่ม> <ปุ่ม onclick = 'linecolor = "สีน้ำเงิน";'> สีน้ำเงิน </button> <button onclick = 'linecolor = "สีเขียว"; onclick = 'linecolor = "black";'> ดำ </button> <br/> <ปุ่ม onclick = "linw = 4;"> 4px </button> <button onclick = "linw = 8;"> 8px </button> <button onclick = "linw = 16; <br/> <img src = "" id = "image_png"> <br/> <script type = "text/javascript"> var canvas = document.getElementById ('canvas'); // รับแท็ก var ctx = canvas.getContext ("2d"); var fillstyle = "Black"; ctx.fillrect (0,0,600,300); var onoff = false; // กดแท็ก var oldx = -10; var oldy = -10; // ตั้งค่าสี var linecolor = "White"; var linw = 4; Canvas.addeventListener ("Mousemove", วาด, จริง); // เหตุการณ์การเคลื่อนไหวของเมาส์ canvas.addeventListener ("Mousedown", ลง, เท็จ); // เหตุการณ์การกดเมาส์ canvas.addeventListener ("Mouseup", up, false); // ฟังก์ชั่นเหตุการณ์ป๊อปอัพเมาส์ลง (เหตุการณ์) {onoff = true; oldx = event.pagex - 10; oldy = event.pagey - 10; } function up () {onoff = false; } ฟังก์ชั่นวาด (เหตุการณ์) {ถ้า (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 = "รอบ"; ctx.stroke (); oldx = newx; oldy = newy; }} ฟังก์ชั่น CopyImage (เหตุการณ์) {var img_png_src = canvas.todataurl ("image/png"); // ฟังก์ชั่นที่บันทึก artboard เป็นเอกสารรูปแบบรูปภาพ getElementById ("image_png"). src = img_png_src; } </script> </body> </html>ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน