Xiaoqiang의 HTML5 모바일 개발 여정(10) – 온라인 드로잉 보드
- 黄舟원래의
- 2017-01-22 11:24:301530검색
이 기사에서는 HTML5를 사용하여 온라인 드로잉 보드를 구현합니다. You Draw and I Guess를 플레이한 친구들도 오늘 간단한 You Draw and I Guess 미니 게임을 플레이할 수 있습니다.
과정은 매우 간단하며 직접 코딩할 수 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>大碗干拌的在线画板</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
#php100{ border:1px solid #ccc;}
</style>
</head>
<body>
<canvas id="php100" width="500" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('php100');
var p100=canvas.getContext("2d");
p100.lineWidth=5
p100.strokeStyle="red";
var paint=0;
$("#php100").mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint=1;
p100.moveTo(mouseX,mouseY); //起始位置
});
$("#php100").mouseup(function(e){
paint=0;
});
$("#php100").mousemove(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
if(paint){
p100.lineTo(mouseX,mouseY); //终止位置
p100.stroke(); //结束图形
}
});
</script>
</body>
</html>관심 있는 친구는 이를 확장하고 몇 개의 버튼을 추가하여 작업판의 색상을 변경하거나 다른 재미를 느낄 수 있습니다. 기능.
위는 Xiaoqiang의 HTML5 모바일 개발 로드(10) - 온라인 드로잉보드 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www. php.cn) !
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.