html --- canvas --- javascript --- 在线画板
canvas功能十分强大，制作一个简易画板易如反掌，主要涉及canvas的画线能力，javascript鼠标点击事件
如有问题请参考：http://www.html5party.com/857.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas 在线画板</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var paint = 0;
canvas.setAttribute("width", 800);
canvas.setAttribute("height", 450);
context.lineWidth = 5;
context.strokeStyle = "green";
canvas.addEventListener("mousedown", onMouseDown, false);
canvas.addEventListener("mousemove", onMouseMove, false);
canvas.addEventListener("mouseup", onMouseUp, false);
function onMouseDown(event){
var mouseX = event.pageX - this.offsetLeft;
var mouseY = event.pageY - this.offsetTop;
paint = 1;
context.beginPath();
context.moveTo(mouseX, mouseY);
}
function onMouseMove(event){
var mouseX = event.pageX - this.offsetLeft;
var mouseY = event.pageY - this.offsetTop;
if(paint){
context.lineTo(mouseX, mouseY);
context.stroke();
}
}
function onMouseUp(event){
paint = 0;
}
</script>
</body>
</html>
运行结果如下：
html --- canvas --- javascript --- 在线画板的更多相关文章
- 使用canvas制作在线画板
canvas绘图的强大功能,让人前仆后继的去研究它.代码全部加起来不足百行.还用到了h5中的<input type="color"/>和<input type=& ...
- 基于HTML5 Canvas的网页画板实现教程
HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...
- 小强的HTML5移动开发之路（10）——在线画板
来自:http://blog.csdn.net/dawanganban/article/details/18094557 在这一篇文章中我们用html5来实现一个在线的画板,玩过你画我猜的朋友今天也可 ...
- 分享十个JavaScript在线调试工具
测试Javascript可能是网页开发中最让人忧伤的工作.这里我找一些比较好的工具来帮助大家进行测试工作.这10款是我精选的基于浏览器的JavaScript在线调试工具,希望你们对你们有用. 1.Op ...
- 高性能动画！HTML5 Canvas JavaScript框架KineticJS
高性能动画!HTML5 Canvas JavaScript框架KineticJS KineticJS是一款开源的HTML5 Canvas JavaScript框架,能为桌面和移动应用提供高性能动画,并 ...
- javascript 在线文本编辑器
javascript 在线文本编辑器实现代码. 效果例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGhwZmVuZ2h1bw==/font/5 ...
- H5中canvas标签制作在线画板
1.介绍 左键点击下移动开始画图.放开鼠标不在画图. 2.重要使用理论 query的使用: 鼠标的按下mousedown 鼠标的移动mousemove 鼠标的放开 mouseup 3.程序 <! ...
- 自己写的HTML5 Canvas + Javascript五子棋
看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...
- 【JavaScript游戏开发】使用HTML5+Canvas+JavaScript 封装的一个超级马里奥游戏（包含源码）
这个游戏基本上是建立在JavaScript模块化的开发基础上进行封装的,对游戏里面需要使用到的游戏场景进行了封装,分别实现了Game,Sprite,enemy,player, base,Animati ...
随机推荐
- Linux和远程系统同步文件（未完成）
实验环境: 本地主机:192.168.0.1 远程主机:192.168.0.101 1. 使用 scp,把/root/tardir1/achieve2.tar.gz复制到远程主机的root用户的hom ...
- Fiddler如何抓取使用了SSL或TLS传输的Android App流量
上篇文章介绍了Burpsuite如何抓取使用了SSL或TLS传输的Android App流量, 那么使用Fiddler的时候其实 也会出现与burpsuite同样的情况,解决方案同样是需要将Fiddl ...
- 开启MySQL慢查询日志
1.修改my.cnf或my.ini 1).linux----------------------------------- /etc/my.cnf 文件 [mysqld] long_query_ti ...
- wamp集成环境开启虚拟主机多站点功能
方法/步骤 如果不是全白色,说明没有正常启动,先解决这个情况再进行下一步操作. 我们一键安装wamp到D盘,并可以正常启动,状态如下图所示: 在D:\wamp\bin\apache\Apach ...
- YTU 2614: A代码完善--系统日期
2614: A代码完善--系统日期 时间限制: 1 Sec 内存限制: 128 MB 提交: 216 解决: 113 题目描述 注:本题只需要提交填写部分的代码,请按照C++方式提交. 已知某操作 ...
- SPOJ 1739 Yet Another Equation（Pell方程）
题目链接:http://www.spoj.com/problems/EQU2/ 题意:给出方程x^2-n*y^2=1的最小整数解. 思路:参见金斌大牛的论文<欧几里得算法的应用>. imp ...
- 《OD学HBase》20160820
一.案例 微博: 微博内容: 关注用户和粉丝用户: 添加或移除关注用户 查看关注用户的微博内容 微博数据存储: 响应时间 秒级 无延迟 (1)mysql分布式 (2)hbase数据库 使用HBase数 ...
- 如何停止Android Monkey脚本
如何停止Android Monkey脚本 最近用monkey来包apk的性能测试,发现一旦monkey跑起来以后,即使将数据线和PC断开,monkey脚本还是会继续运行下去.结果找到了一个办法去停止它 ...
- c#调用系统资源大集合-3
public static void 打开控制面板多媒体属性音频() { Process.Start("rundll32.exe", " shell32.dll,Cont ...
- 维护没有源代码，float改成double
float f= 931340.31f; Console.WriteLine(f.ToString("#,###,##0.00")); 返回 931,340.30 ,float 1 ...