이 기사에서는 HTML5 캔버스가 참조하기 위해 구현 한 사진 보드 코드를 공유합니다. 특정 내용은 다음과 같습니다
<! docType html> <html> <head> <meta charset = "utf-8"> <title> demo6 : 사용자 정의 아트 보드 </title> </head> <body> <canvas id = "canvas"> 브라우저는 캔버스를 지원하지 않습니다. onclick = 'linecolor = "yellow";'> yellow </button> <버튼 onclick = 'linecolor = "red";'> red </button> <button onclick = 'linecolor = "blue";'> blue </button> <button onclick = 'linecolor = "green";'> green </button> <linecolor = '</bulting </bulting </bulting onclick = 'linecolor = "black";'> black </button> <br/ <br/ <br/> <button onclick = "linw = 4;"> 4px </4px> <버튼 onclick = "linw = 8;"> 8px </button> <button onclick = "linw = 16;"> 16px </button> <brict </button </button </export ()> export () <br/> <img src = ""id = "id ="image_png "> <br/> <script type ="text/javaScript "> var canvas = document.getElementById ( 'canvas'); // 태그를 가져옵니다 var ctx = canvas.getContext ( "2d"); var fillstyle = "검은 색"; ctx.fillRect (0,0,600,300); var onoff = false; // 태그 var oldx = -10을 누릅니다. var oldy = -10; // 색상을 설정 var linecolor = "화이트"; var linw = 4; canvas.addeventListener ( "MouseMove", draw, true); // 마우스 움직임 이벤트 canvas.addeventListener ( "Mousedown", down, false); // 마우스 프레스 event event 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 = "라운드"; 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>위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.