تشترك هذه المقالة في رمز لوحة الصور الذي تم تنفيذه بواسطة HTML5 Canvas للرجوع إليه. المحتوى المحدد كما يلي
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> demo6: Artboard المخصص </title> </head> <body> <canvas id = "canvas"> المتصفح لا يدعم القماش <!-إذا لم يتم دعم هذا النص ، فسيتم عرضه-> onClick = 'linecolor = "yellow" ؛'> أصفر </button> <button onClick = 'linecolor = "red" ؛' Red </button> <button onClick = 'linecolor = "blue" ؛'> blue </button> <button onClick = 'linecolor = "green" ؛ onClick = 'linecolor = "black" ؛'> black </utton> <br/> <button onClick = "linw = 4 ؛"> 4px </utton> <button onClick = "linw = 8 ؛ <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" ، draw ، true) ؛ // Mouse Movement Event 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 ؛ } دالة 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 = "Round" ؛ ctx.stroke () ؛ oldx = newx ؛ Oldy = Newy ؛ }} function copyimage (event) {var img_png_src = canvas.todataurl ("Image/PNG") ؛ // الوظائف التي تنقذ Artboard كمستند لتنسيق الصورة. } </script> </body> </html>ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.