>  기사  >  웹 프론트엔드  >  JS와 HTML을 사용하여 간단한 스케치패드 코드 만들기

JS와 HTML을 사용하여 간단한 스케치패드 코드 만들기

php中世界最好的语言
php中世界最好的语言원래의
2017-11-30 14:11:573942검색

오늘은 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(&#39;c1&#39;);
var oColor=document.getElementById(&#39;color&#39;);
var oNum=document.getElementById(&#39;num&#39;);
var gd=oC.getContext(&#39;2d&#39;);//画笔
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를 사용하지 않고 마우스 오버 스타일을 변경하는 방법

CSS를 사용하여 이미지 회전 효과를 만드는 방법

HTML 웹 페이지를 최적화하는 방법

위 내용은 JS와 HTML을 사용하여 간단한 스케치패드 코드 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.