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 --- 在线画板的更多相关文章

  1. 使用canvas制作在线画板

    canvas绘图的强大功能,让人前仆后继的去研究它.代码全部加起来不足百行.还用到了h5中的<input type="color"/>和<input type=& ...

  2. 基于HTML5 Canvas的网页画板实现教程

    HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...

  3. 小强的HTML5移动开发之路（10）——在线画板

    来自:http://blog.csdn.net/dawanganban/article/details/18094557 在这一篇文章中我们用html5来实现一个在线的画板,玩过你画我猜的朋友今天也可 ...

  4. 分享十个JavaScript在线调试工具

    测试Javascript可能是网页开发中最让人忧伤的工作.这里我找一些比较好的工具来帮助大家进行测试工作.这10款是我精选的基于浏览器的JavaScript在线调试工具,希望你们对你们有用. 1.Op ...

  5. 高性能动画！HTML5 Canvas JavaScript框架KineticJS

    高性能动画!HTML5 Canvas JavaScript框架KineticJS KineticJS是一款开源的HTML5 Canvas JavaScript框架,能为桌面和移动应用提供高性能动画,并 ...

  6. javascript 在线文本编辑器

    javascript 在线文本编辑器实现代码. 效果例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGhwZmVuZ2h1bw==/font/5 ...

  7. H5中canvas标签制作在线画板

    1.介绍 左键点击下移动开始画图.放开鼠标不在画图. 2.重要使用理论 query的使用: 鼠标的按下mousedown 鼠标的移动mousemove 鼠标的放开 mouseup 3.程序 <! ...

  8. 自己写的HTML5 Canvas + Javascript五子棋

    看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...

  9. 【JavaScript游戏开发】使用HTML5+Canvas+JavaScript 封装的一个超级马里奥游戏（包含源码）

    这个游戏基本上是建立在JavaScript模块化的开发基础上进行封装的,对游戏里面需要使用到的游戏场景进行了封装,分别实现了Game,Sprite,enemy,player, base,Animati ...

随机推荐

  1. Class文件内容及常量池

    当JVM运行Java程序的时候,它会加载对应的class文件,并提取class文件中的信息存放在JVM开辟出来的方法区内存中.那么这个class文件里面到底有些什么内容呢? 一.class文件内容概述 ...

  2. 解决NetworkOnMainThreadException

    今天在Android 访问 WebService 的时候遇到,错误Caused by: android.os.NetworkOnMainThreadException,查了下原因上在4.0之后在主线程 ...

  3. java异常——RuntimeException和User Define Exception

    1.RuntimeException public class RuntimeException { public static void main(String[] args) { // TODO ...

  4. js webstorm用法

    js  webstorm用法 一.什么是webstorm?       WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器” ...

  5. Test Tools

    1. http://www.dummytextgenerator.com/: Generate dummy text 2. fsutil file createnew D:\New.txt 1024: ...

  6. linux scp命令参数及用法详解--linux远程复制拷贝命令使用实例【转】

    转自:http://blog.csdn.net/jiangkai_nju/article/details/7338177 一般情况,本地网络跟远程网络进行数据交抱,或者数据迁移,常用的有三种方法,一是 ...

  7. The GPG keys listed not correct

    The GPG keys listed for the "Extra Packages for Enterprise Linux 5 - x86_64" repository ar ...

  8. MongoDB 学习笔记（三） MongoDB (replica set) 集群配置

    MongoDB Replica Sets的结构类似于以集群,完全可以把他当成一个集群,因为他确实与集群实现的作用是一样的:如果其中一个节点出现故障,其他的节点会马上将业务接管过来.而无需停机操作 Mo ...

  9. poj1961Period（next数组）

    http://poj.org/problem?id=1961 对于next数组只能说略懂,其中精髓还是未完全领会 大体是本串相同前缀与后缀的最大长度,读不懂?看串abcdab 这里所说前缀与后缀都为a ...

  10. WinCE5.0中文模拟器SDK(VS2005)的配置

    WinCE5.0中文模拟器SDK的安装过程不细说了,一路默认即可,下面主要介绍如何配置,使其能在VS2005中正常使用. 安装完成后,打开VS2005,点击菜单“工具”——“选项”——“设备工具”—— ...