この記事では、参照のためにHTML5キャンバスが実装した画像ボードコードを共有しています。特定のコンテンツは次のとおりです
<！doctype html> <html> <head> <meta charset = "utf-8"> <title> demo6：custom artboard </title> </head> <body> <body> <canvas id = "canvas">ブラウザはCanvas <！をサポートしません<！ - onclick = 'linecolor = "yellow";'> yellow </button> <button onclick = 'linecolor = "red";'> red </button> <button onclick = 'linecolor = "blue";'> button onclick = 'linecolor = "green";'>緑< onclick = 'linecolor = "black";'> black </button> <br/> <button onclick = "linw = 4;"> 4px </button> <button onclick = "linw = 8;"> 8px </button> <button onclick = "linw = 16;"> 16px </button> <brutt </button </button = " <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; // color var linecolor = "white"を設定します。 varlinw = 4; canvas.addeventlistener（ "mousemove"、draw、true）; //マウスの動きイベントCanvas.AddeventListener（ "Mousedown"、down、false）; //マウスプレスイベントCanvas.AddeventListener（ "MouseUp"、up、false）; //マウスポップアップイベント機能ダウン（イベント）{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 = "round"; ctx.stroke（）; oldx = newx; Oldy = newy; }} function copyimage（event）{var img_png_src = canvas.todataurl（ "image/png"）; //アートボードを画像形式として保存する機能document.getElementById（ "Image_png"）。src = img_png_src; } </script> </body> </html>上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。