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 ...
随机推荐
- UE中使用正则表达式的一些技巧
UE中使用正则表达式的一些技巧 2010-12-24 10:33:19 分类: Linux 以下是网上摘录的UE 技巧 1)删除空行: 替换 %[ ^t]++^p 为 空串 2)删除行尾空格: 替换 ...
- 在VS2010中使用Git(转)
在之前的一片博客<Windows 下使用Git管理Github项目>中简单介绍了在Windows环境中使用Git管理Github项目,但是是使用命令行来进行操作的,本文将简单介绍下在VS2 ...
- jstl long类型数据转换为日期格式
一.有WEB-INF下建立一个datetag.tld <?xml version="1.0" encoding="UTF-8"?> <tagl ...
- spry菜单栏(二)
自定义选项卡式面板构件 尽管使用属性检查器可以简化对选项卡式面板构件的编辑,但是属性检查器并不支持自定义的样式设置任务.您可以修改选项卡式面板构件的 CSS 规则,并创建根据自己的喜好设置样式的构件. ...
- [原]武大预选赛F题-（裸并查集+下标离散化+floyd最短路）
Problem 1542 - F - Countries Time Limit: 1000MS Memory Limit: 65536KB Total Submit: 266 Accepted: 36 ...
- 关于scut使用WebService
起初是看见官方例子里天界行的项目使用了WebService想试一下.用来做充值回调,后来发现由于版本更新已经弃用了 问了下管理员,由于天界行直接从iis服务端移植过来所以还保留了Webservice的 ...
- allegro蛇形线
蛇形线设置: 设置之后,框选你要修改的线即可: 修线: --------------------------------
- bash/shell 数学计算
$ echo $((20.0/7)) $ zcalc $ bc <<< 20+5/2 $ bc <<< 'scale=4;20+5/2' $ expr 20 + 5 ...
- [HDOJ1043]Eight（康托展开 BFS 打表）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1043 八数码问题,因为固定了位置所以以目标位置开始搜索,把所有情况(相当于一个排列)都记录下来,用康托 ...
- JS里面匿名函数的调用 & 变量作用域的实验
参考 http://www.educity.cn/wenda/54753.html 已实验验证结果正确. 1.下列哪些正确?(B.C) A.function(){ alert("Here!& ...