Xiaoqiang's HTML5 mobile development journey (10) – Online drawing board-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

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

黄舟

Jan 22, 2017 am 11:24 AM

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>

Copy after login

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 of this Website

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