课程咨询:400-111-8989

  • 在线画板--HTML5移动开发(10)

    发布:HTML5培训  来源:html5教程  时间: 2016年02月23日

  • 在这一篇文章中我们用HTML5来实现一个在线的画板,玩过你画我猜的朋友今天也可以做一个简单的你画我猜小游戏啦!...

  • 在这一篇文章中我们用HTML5来实现一个在线的画板,玩过你画我猜的朋友今天也可以做一个简单的你画我猜小游戏啦!

    过程很简单直接上代码了:

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

  • 上一篇:坦克大战游戏3 --HTML5移动开发(9)

    下一篇:HTML5中的全局属性 --HTML5移动开发(11)

网站导航
2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56