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

本文为兄弟连IT教育机构官方 HTML5培训教程，主要介绍：HTML5移动开发之路（10）——在线画板

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

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

[html] view plain copy

print?

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

有兴趣的朋友可以进行扩展，添加几个按钮可改变画板颜色或者其他好玩的功能。

时间： 2024-10-27 08:37:13

HTML5移动开发之路（10）——在线画板的相关文章

HTML5移动开发之路（28）—— JavaScript回顾3

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(28)-- JavaScript回顾3 一.基本数据类型 number:数字类型 string:字符串 (注意s小写:string是基本类型) boolean:布尔类型 //前三个都有对应的包装类 null:空类型 undefined:未定义类型测试一: [html] view plain copy print? <html>  <head> <

HTML5移动开发之路（15）——HTML5中的音频

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(15)--HTML5中的音频浏览器虽然发展很快,但是浏览器中的标准还是不完善,在HTML4+CSS2+JS的前段开发中让很多程序员头疼的就是浏览器的兼容性问题,音频播放也一样,直到现在,仍然不存在一项网页上播放视频和音频的标准.现在,在大多数浏览器中,音频是通过插件(比如:flash插件)来播放的.然而,不是所有浏览器都具有这样的插件,所以对音频的播放造成了一定的麻烦.在HTML5的新标准中规定了一种通过

HTML5移动开发之路（49）——HTML5开发神器HBuilder 今天给大家介绍一款开发HTML5的神器——HBuilder.

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(49)--HTML5开发神器HBuilder 今天给大家介绍一款开发HTML5的神器--HBuilder. 下载地址:http://www.dcloud.NET.cn/ 一.新建文件可以看到支持web app开发和普通网站前端开发,我们首先建立一个移动App项目注释:Html5+规范是基于HTML5的扩展规范,用于弥补HTML5和原生应用功能之间的差距.HTML5+规范是一个开放的规范,在W3C中国的指

HTML5移动开发之路（21）—— PhoneGap

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(21)-- PhoneGap 一.PhoneGap是什么 PhoneGap 是一个用基于 HTML,CSS 和 JavaScript 的,创建移动跨平台移动应用程序的快速开发框架.它使开发者能够利用 iPhone,Android,Palm,Symbian,WP7,Bada 和 Blackberry 智能手机的核心功能--包括地理定位,加速器,联系人,声音和振动等,此外 PhoneGap 拥有丰富的插件,可以

HTML5移动开发之路（17）——HTML5内联SVG

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(17)--HTML5内联SVG 一.什么是SVG 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准. SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改

HTML5移动开发之路（11）——链接，图片，表格，框架

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(11)--链接,图片,表格,框架一.HTML是什么? HTML(hypertext mark-uplanguage)是超文本标记语言, 主要的用处是做网页, 可以在网页上显示文字.图像.视频.声音- HTML只能做静态网页二.HTML发展历史 html之父-Tim Berners-Lee蒂姆·伯纳斯-李(Tim Berners-Lee)1955年6月8日出生于英国伦敦关于详细请看:http://b

HTML5移动开发之路（8）——坦克大战游戏2

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(8)--坦克大战游戏2 在上一篇文章中我们已经画出了自己的坦克,并且可以控制自己的坦克移动,我们继续接着上一篇来实现我们的坦克大战游戏吧. 一.将JS文件分离出来使用OO的思想,我们已经对坦克进行了封装,对画坦克也进行了封装,下面我们将这两个对象提取到外部的js文件中,文件内容如下: [javascript] view plain copy print? //定义一个Hero类(后面还要改进) //x表示

HTML5移动开发之路（7）——坦克大战游戏1

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(7)--坦克大战游戏1 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片,在上一篇的基础上我们来做一个基于HTML5的坦克大战游戏,下面我们开始吧一.用Canvas画出我们的坦克我们设计的坦克结构如下图所示,如果有的朋友有更好的设计,希望分享和交流一下. 如上图所示,我们的坦克基本上是由三个矩形和一个圆形一个线段组成,每个部件的尺寸进行了标记,单位为px,下面我们用上一篇中

HTML5移动开发之路（36）——jQuery中的DOM操作

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(36)--jQuery中的DOM操作 1.查询利用选择器查找节点使用 html() / text() / attr() 输出节点文本和属性值. 注意:下拉列表使用 val() [html] view plain copy print? <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery