来自:http://blog.csdn.net/dawanganban/article/details/18094557
在这一篇文章中我们用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 >
有兴趣的朋友可以进行扩展,添加几个按钮可改变画板颜色或者其他好玩的功能。