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. UML系列02之 UML类图(2)

    UML类图的几种关系 在UML类图中,关系可以分为4种: 泛化, 实现, 关联 和 依赖.1. 泛化 -- 表示"类与类之间的继承关系".2. 实现 -- 表示"类与接口 ...

  2. 如何使用通用Mapper

    集成方法请看上面的文档,集成后,可以继续阅读本页文档. 1. 继承通用的Mapper<T>,必须指定泛型<T> 例如下面的例子: public interface UserIn ...

  3. CListView虚拟列表

    首先说下虚拟列表出现的原因: 数据量比较小的时候,对于CListView控件可以直接使用InsertItem并配合SetItemText函数来插入并修改数据.这样操作很直接. 但是,如果数据量比较大了 ...

  4. bootstrap table 服务器端分页例子

    1,前台引入所需的js 可以从官网上下载 function getTab(){ var url = contextPath+'/fundRetreatVoucher/fundBatchRetreatV ...

  5. 《Linux/Unix系统编程手册》读书笔记5

    <Linux/Unix系统编程手册>读书笔记 目录 第8章 本章讲了用户和组,还有记录用户的密码文件/etc/passwd,shadow密码文件/etc/shadow还有组文件/etc/g ...

  6. flex 4 写皮肤

    皮肤容器:s:SparkSkin 主机组件:  [HostComponent("spark.components.Panel")] 绘制: <s:Group left=&qu ...

  7. task判断任务是否存在

    tasklist|find /i "qq.exe" ||exit taskkill /im qq.exe /f

  8. UVA 11019 Matrix Matcher（ac自动机）

    题目链接:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  9. Introduction

    http://www.entityframeworktutorial.net/EntityFramework5/entity-framework5-introduction.aspx Basics o ...

  10. 在C#中dagagridview绑定list泛型

    今天在项目中由于需要使用到datagridview绑定list的数据源,在针对list的添加.删除.修改都可以很好地完成,可是在初始化datagridview时,却发现了问题,绑定数据源后,并没有在列 ...