suchen

Heim >Web-Frontend >H5-Tutorial >Xiaoqiangs Reise zur mobilen HTML5-Entwicklung (10) – Online-Zeichenbrett

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

黄舟
黄舟Original
2017-01-22 11:24:301577Durchsuche

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>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (9) – Tank Battle Game 3Nächster Artikel：Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (9) – Tank Battle Game 3

In Verbindung stehende Artikel

Mehr sehen