• 小强的HTML5移动开发之路（10）——在线画板

    来自：http://blog.csdn.net/dawanganban/article/details/18094557

    在这一篇文章中我们用html5来实现一个在线的画板，玩过你画我猜的朋友今天也可以做一个简单的你画我猜小游戏啦，效果如下图所示：

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

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5. <title>大碗干拌的在线画板</title>  
    6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
    7. <style type="text/css">  
    8. #php100{ border:1px solid #ccc;}  
    9. </style>  
    10. </head>  
    11. <body>  
    12. <canvas id="php100" width="500" height="400"></canvas>  
    13.   
    14. <script type="text/javascript">  
    15.  var canvas = document.getElementById('php100');  
    16.  var p100=canvas.getContext("2d");  
    17.      p100.lineWidth=5  
    18.      p100.strokeStyle="red";  
    19.        
    20.  var paint=0;  
    21.    
    22. $("#php100").mousedown(function(e){  
    23.   
    24.   var mouseX = e.pageX - this.offsetLeft;  
    25.   var mouseY = e.pageY - this.offsetTop;   
    26.     
    27.   paint=1;  
    28.   p100.moveTo(mouseX,mouseY); //起始位置  
    29.     
    30. });  
    31.   
    32. $("#php100").mouseup(function(e){  
    33.    paint=0;  
    34. });  
    35.   
    36. $("#php100").mousemove(function(e){  
    37.   var mouseX = e.pageX - this.offsetLeft;  
    38.   var mouseY = e.pageY - this.offsetTop;   
    39.   
    40.     if(paint){  
    41.         p100.lineTo(mouseX,mouseY); //终止位置  
    42.         p100.stroke();              //结束图形  
    43.       }  
    44.     
    45. });  
    46.   
    47. </script>  
    48. </body>  
    49.   
    50. </html>  

    有兴趣的朋友可以进行扩展，添加几个按钮可改变画板颜色或者其他好玩的功能。
  • 相关阅读:
    完美解决SpringCloud无法上传大文件方法
    完美解决SpringBoot无法上传大文件方法
    完美解决SpringMVC无法上传大文件方法
    完美解决c#.net无法上传大文件方法
    完美解决csharp无法上传大文件方法
    完美解决c#无法上传大文件方法
    完美解决asp.net无法上传大文件方法
    完美解决java无法上传大文件方法
    P47 会话 tf.Session()
    P46 tensorflow的图
  • 原文地址：https://www.cnblogs.com/wanghang/p/6298971.html
Copyright © 2020-2023  润新知