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 ...
随机推荐
- 微信jssdk uploadImage 巨坑
//解决IOS无法上传的坑 if (localId.indexOf("wxlocalresource") != -1) { localId = localId.replace(&q ...
- URL重写的优缺点分析
如何增强您网站地址的可读性.如何让搜索引擎快速收录到您的站点,这就需要优化您的Url,即Url的重写技术,大家熟悉的可能有很多服务器都提供Url重写技术,以前我们用的最多的就是Apache,Jboss ...
- laravel named route
laravel中一般对于路由的使用方法是在routes.php中定义一个路由,在view中如果要引用一个url则直接通过<a href="url/">来使用. 但是随着 ...
- laravel, Composer和autoloading
http://www.php-fig.org/psr/psr-4/ http://www.php-fig.org/psr/psr-0/ http://alanstorm.com/laravel_com ...
- how to check unsolved conflicts file list in git merge?
how to check unsolved conflicts file list in git merge?
- C语言之宏
所谓的宏就是一种预处理命令,什么是与处理呢?即在编译过程之前先对程序代码做出的必要的转换处理.宏有两个作用: 1.当遇到需要将程序某个特定的数量在程序中出现的所有实例通通加以修改时,程序只需改动一处即 ...
- redis接入sentinelPool的配置
package com.netease.mobile.commonUtil; import java.util.ArrayList; import java.util.HashSet; import ...
- web项目路径问题
路径 相对路径 URL中第一个字符不为“/” request.getRequestDispatcher("b"); 相对于该代码所在 ...
- LeetCode Linked List Cycle II 单链表环2 （找循环起点）
题意:给一个单链表,若其有环,返回环的开始处指针,若无环返回NULL. 思路: (1)依然用两个指针的追赶来判断是否有环.在确定有环了之后,指针1跑的路程是指针2的一半,而且他们曾经跑过一段重叠的路( ...
- android 呼入电话的监听（来电监听）转
需要权限: <uses-permission android:name="android.permission.READ_PHONE_STATE" /> 方式一:通过广 ...