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

来源：互联网发布：网络二手车平台靠谱吗编辑：程序博客网时间：2024/05/01 16:23

在这一篇文章中我们用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>

有兴趣的朋友可以进行扩展，添加几个按钮可改变画板颜色或者其他好玩的功能。Java学习交流群142979499 JAVA技术交流群

Android学习交流群311273384

11 0