HTML5移动开发之路(7)——在线画板
来源:互联网 发布:网络约车管理办法 编辑:程序博客网 时间:2024/05/01 12:47
在这一篇文章中我们用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>
有兴趣的朋友可以进行扩展,添加几个按钮可改变画板颜色或者其他好玩的功能。
0 0
- HTML5移动开发之路(7)——在线画板
- 小强的HTML5移动开发之路(10)——在线画板
- 小强的HTML5移动开发之路(10)——在线画板
- HTML5移动开发之路(18)—— PhoneGap
- 小强的HTML5移动开发之路(49)——HTML5开发神器HBuilder
- 小强的HTML5移动开发之路(49)——HTML5开发神器HBuilder
- html5在线画板
- HTML5移动开发之路(16)——HTML5 Local Storage(本地存储)
- 小强的HTML5移动开发之路(2)——HTML5的新特性
- HTML5移动开发之路(2)——HTML5的新特性
- 小强的HTML5移动开发之路(3)——HTML5与HTML4比较
- 小强的HTML5移动开发之路(13)——HTML5中的全局属性
- 小强的HTML5移动开发之路(15)——HTML5中的音频
- 小强的HTML5移动开发之路(17)——HTML5内联SVG
- 小强的HTML5移动开发之路(18)——HTML5地理定位
- 小强的HTML5移动开发之路(20)——HTML5 Web SQL Database
- 小强的HTML5移动开发之路(3)——HTML5与HTML4比较
- 小强的HTML5移动开发之路(2)——HTML5的新特性
- IT痴汉的工作现状19-公司组织结构
- 手游上线必须做的事情 手游运营必看的上线流程干货分享
- lua 5.x的一些小知识
- java 中常用的io流总结
- (转)各种音视频编解码学习详解 h264 ,mpeg4 ,aac 等所有音视频格式(二)
- HTML5移动开发之路(7)——在线画板
- SOAP
- mac osx 安装apache+php
- 学习笔记: shell 编程中空格的使用
- 在gdb中如何将所有线程的堆栈输出到文件中去
- (转)AAC ADTS LATM 格式分析
- Cocos2d-x 3.x 全平台新手开发配置教程
- OpenCV成长之路:直线、轮廓的提取与描述
- oracle BBED 直接修改数据库block块