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. 《c程序设计语言》读书笔记--闰年和字符输入不用 && ||

    #include <stdio.h> #include <string.h> #define sta 1500 #define Num 1600 int main() { in ...

  2. 错误 -force-32bit 与 ANDROID_EMULATOR_FORCE_32BIT=true

    1,配置环境变量, 加上ANDROID_EMULATOR_FORCE_32BIT=true 2,在AS中启动模拟器用下面方法 在你要运行的个工程右击->Run as -> Run conf ...

  3. 【转】对Android开发者有益的40条优化建议

    下面是开始Android编程的好方法: 找一些与你想做事情类似的代码 调整它,尝试让它做你像做的事情 经历问题 使用StackOverflow解决问题 对每个你像添加的特征重复上述过程.这种方法能够激 ...

  4. 《OD大数据实战》驴妈妈旅游网大型离线数据电商分析平台

    一.环境搭建 1. <OD大数据实战>Hadoop伪分布式环境搭建 2. <OD大数据实战>Hive环境搭建 3. <OD大数据实战>Sqoop入门实例 4. &l ...

  5. Java中的private、protected、public和default的区别

        (1)对于public修饰符,它具有最大的访问权限,可以访问任何一个在CLASSPATH下的类.接口.异常等.它往往用于对外的情况,也就是对象或类对外的一种接口的形式. (2)对于protec ...

  6. POJ 2236 (简单并查集) Wireless Network

    题意: 有n个电脑坏掉了,分别给出他们的坐标 有两种操作,可以O x表示修好第x台电脑,可以 S x y表示x y是否连通 两台电脑的距离不超过d便可连通,两台电脑是连通的可以直接连通也可以间接通过第 ...

  7. [转]C#中的？和？？

    原文链接:http://msdn.microsoft.com/zh-tw/library/2cf62fcy%28VS.80%29.aspx 使用可為 Null 的型別 (C# 程式設計手冊) Visu ...

  8. Heritrix源码分析(四) 各个类说明(转）

    Heritrix的类的确很繁琐,往往继承了一层又一层,最多的继承好像有7层.下面就一个包一个包的说明每个类的作用,由于里面Heritrix组件分明,很多组件没用到的同时该组件的类我也没怎么接触,所以这 ...

  9. mysql 查看所有存储过程

    转载地址:http://zhuixue.iteye.com/blog/375353 查询数据库中的存储过程 方法一: select `name` from mysql.proc where db = ...

  10. Pig实战

    1. pig简介 2. 安装pig 3. 实战pig 4. 深入pig 5. 参考资料及代码下载 <1>. Pig简介  pig是hadoop项目的一个拓展项目, 用以简化hadoop编程 ...