오늘은 CSS3, H5, JS를 사용하여 재미있는 간단한 드로잉 보드를 만드는 방법을 가르쳐 드리겠습니다. 관심 있는 친구들은 아래에 코드를 게시해 놓았습니다. 누구나 창의력을 발휘하여 일부 기능을 변경할 수도 있습니다.
html: <body> <canvas width="800" height="600" id="c1"> <span> </span> </canvas> <ul id="ul1"> <li>颜色版:<input id="color" type="color"/></li> <li>笔触:<input id="num" type="number" min="0" max="100"/></li> <li></li> </ul> </body> css: <style> *{ margin:0; padding:0;} body{ background:#000;} canvas{ background:#fff; float:left;} span{ color:#fff; font-size:80px;} #ul1{width:100px;height:600px; float:left; background:#ccc;} </style> javascript: <script> window.onload=function(){ var oC=document.getElementById('c1'); var oColor=document.getElementById('color'); var oNum=document.getElementById('num'); var gd=oC.getContext('2d');//画笔 oNum.onchange=function(){ gd.lineWidth = oNum.value; strokeFn(); }; oColor.onchange=function(){ gd.strokeStyle = oColor.value; strokeFn(); }; strokeFn(); function strokeFn(){ gd.beginPath(); oC.onmousedown=function(ev){ gd.moveTo(ev.clientX,ev.clientY); oC.onmousemove=function(ev){ gd.lineTo(ev.clientX,ev.clientY); gd.stroke(); }; oC.onmouseup=function(){ oC.onmousemove=oC.onmouseup=null; }; return false; }; } }; </script>
이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 읽기:
CSS를 사용하지 않고 마우스 오버 스타일을 변경하는 방법
위 내용은 JS와 HTML을 사용하여 간단한 스케치패드 코드 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!