Xiaoqiangs Reise zur mobilen HTML5-Entwicklung (10) – Online-Zeichenbrett-H5-Tutorial-php.cn

Xiaoqiangs Reise zur mobilen HTML5-Entwicklung (10) – Online-Zeichenbrett

黄舟

Freigeben： 2017-01-22 11:24:30

Original

1554 Leute haben es durchsucht

In diesem Artikel verwenden wir HTML5, um ein Online-Zeichenbrett zu implementieren. Freunde, die You Draw and I Guess gespielt haben, können heute auch ein einfaches You Draw and I Guess-Minispiel spielen. Der Effekt ist wie folgt:

Xiaoqiangs Reise zur mobilen HTML5-Entwicklung (10) – Online-Zeichenbrett

Der Vorgang ist sehr einfach und kann direkt codiert werden:

<!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>

Nach dem Login kopieren

Interessierte Freunde können ihn erweitern und ein paar Schaltflächen hinzufügen, um die Farbe des Zeichenbretts zu ändern oder andere lustige Dinge Funktion.

Das Obige ist der Inhalt von Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (10) – Online-Zeichenbrett. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www. php.cn) !