search

Home >Web Front-end >H5 Tutorial >Xiaoqiang's HTML5 mobile development journey (10) – Online drawing board

Xiaoqiang's HTML5 mobile development journey (10) – Online drawing board

黄舟
黄舟Original
2017-01-22 11:24:301576browse

In this article we use HTML5 to implement an online drawing board. Friends who have played You Draw and I Guess can also play a simple You Draw and I Guess mini game today. The effect is as shown in the figure below:

Xiaoqiangs HTML5 mobile development journey (10) – Online drawing board

The process is very simple and can be directly coded: 

<!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(&#39;php100&#39;);  
 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>

Interested friends can extend it and add a few buttons to change the color of the drawing board or other fun functions.


The above is the content of Xiaoqiang’s HTML5 mobile development road (10)-online drawing board. For more related content, please pay attention to the PHP Chinese website (www.php.cn) !

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Xiaoqiang’s HTML5 mobile development road (9) – Tank Battle Game 3Next article：Xiaoqiang’s HTML5 mobile development road (9) – Tank Battle Game 3

Related articles

See more