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. iOS:UIAlertController和UIAlertAction的详解

    提示框控制器:UIAlertController 提示框按钮:UIAlertAction   功能:用来提示信息,并给出一些可以进行选择的按钮来处理相应的要求.   注意:在Xcode的iOS8 SD ...

  2. 解决：Eclipse调试的时候报错'Launching XXX' has encountered a problem. Cannot connect to VM.

    问题如下图: 原因:开了代理(我使用的是Proxifier)如图 解决方案:关闭Proxifier即可

  3. javascript 网络是否连接的几种方案

    js   网络是否连接的几种方案 1.通过html5的新属性: window.onload = function () {            var isOnLine = navigator.on ...

  4. javaScript初学者易错点

    大家好,这是我在博客园写的第一篇博文.作为一名前端开发初学者,由于经验不足,水平有限,在做项目的过程中总会遇到这样或那样的问题,每每这时候,我都比较喜欢到博客园这里来寻求解决方案,结果也总是能找到满意 ...

  5. ILog JRules 标识符 X 未定义

    在定义枚举值时,属性“转译”(“translation”),定义字符串时需要双引号,相当于value值. 其属性值如果只有字符串,而没有双引号,在编译或者执行时就会报“标识符X未定义”的错误信息.

  6. 51 nod 1006 最长公共子序列Lcs

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1006 参考博客 :http://blog.csdn.net/yysdsy ...

  7. Regex count lowercase letters

    Description: Your task is simply to count the total number of lowercase letters in a string. Example ...

  8. C语言输出当前日期和时间

    #include <stdio.h> #include <time.h> char* asctime2(const struct tm *timeptr) { static c ...

  9. 实现JavaScript中继承的三种方式

    在JavaScript中,继承可以通过三种手法实现原型链继承 使用apply.call方法 对象实例间的继承.     一.原型链继承 在原型链继承方面,JavaScript与java.c#等语言类似 ...

  10. JSON 之 SuperObject(5): Format 与转义字符

    unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...