使用ocanvas做了个简单的在线画板。

ocanvas参考：http://ocanvas.org/

效果如下：

主要代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>oCanvas Example</title>

    <meta name="robots" content="noindex, nofollow">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <script src="http://libs.useso.com/js/zepto/1.1.3/zepto.min.js"></script>

    <script>

    var line_color = '#000';

    var line_size = 3;

    $(function(){

        $('.tool .color div').click(function(){

            $('.tool .color div').removeClass('active');

            $(this).addClass('active');

            line_color = $(this).data('color');

            mouseDot.fill = line_color;

        });

        $('.tool .size div').click(function(){

            $('.tool .size div').removeClass('active');

            $(this).addClass('active');

            line_size = $(this).data('size');

            mouseDot.radius = Math.max(line_size / 2, 3);

        });

    });

    </script>

    <style>

    body, html {padding:0; margin:0; overflow:hidden;}

    .tool{position:absolute; top:10px; left:10px; border:solid 1px #aaa; background-color:#eee; border-radius:5px; padding-right:5px;}

    .tool .color {float:left; margin:5px; width:30px;}

    .tool .color div{width:24px; height:24px; border:solid 2px #aaa; margin-bottom:5px; opacity:0.5;}

    .tool .color div:hover{opacity:1; cursor:pointer;}

    .tool .color .active{opacity:1; border:solid 2px #000;}

    .tool .size {float:left; margin:5px; width:30px; margin-left:0;}

    .tool .size div{width:30px; height:30px; border:solid 2px #aaa; margin-bottom:5px; opacity:0.5;}

    .tool .size div:hover{opacity:1; cursor:pointer;}

    .tool .size .active{opacity:1; border:solid 2px #000;}

    .tool .size span{display:block; margin:3px auto; height:24px; background-color:black;}

    .btn {clear:both; margin-bottom:5px; text-align:center;}

    .btn input {padding:3px 15px;}

    </style>

</head>

<body>

    <canvas id="canvas" width="200" height="100"></canvas>

    <div class="tool">

        <div class="color">

            <div style="background:#000;" data-color="#000" class="active"></div>

            <div style="background:#f00;" data-color="#f00"></div>

            <div style="background:#0f0;" data-color="#0f0"></div>

            <div style="background:#00f;" data-color="#00f"></div>

            <div style="background:#ff0;" data-color="#ff0"></div>

            <div style="background:#0ff;" data-color="#0ff"></div>

            <div style="background:#f0f;" data-color="#f0f"></div>

            <div style="background:#fff;" data-color="#fff"></div>

        </div>

        <div class="size">

            <div class="active" data-size="3" ><span style="width:3px;" ></span></div>

            <div data-size="6" ><span style="width:6px;" ></span></div>

            <div data-size="9" ><span style="width:9px;" ></span></div>

            <div data-size="12"><span style="width:12px;"></span></div>

            <div data-size="15"><span style="width:15px;"></span></div>

            <div data-size="20"><span style="width:20px;"></span></div>

            <div data-size="25"><span style="width:25px;"></span></div>

        </div>

        <div class="btn">

            <input type="button" value="清 空" onclick="clearAll();" />

        </div>

    </div>

    <script src="js/ocanvas-2.7.3.min.js"></script>

    <script>

    var c = document.querySelector("#canvas"),

    ctx = c.getContext("2d");

    c.width = window.innerWidth;

    c.height = window.innerHeight;

    c.addEventListener("touchmove", function (e) { e.preventDefault(); }, false);

    var cs = oCanvas.create({

        canvas: "#canvas",

        background: "#fff",

        fps: 30,

        disableScrolling: true

    });

    var isDraw = false;

    var xx = 0;

    var yy = 0;

    var mouseDot;

    clearAll();

    cs.bind('mousedown', function(){

        drawBegin(cs.mouse.x, cs.mouse.y);

    }).bind('touchstart tap', function(){

        drawBegin(cs.touch.x, cs.touch.y);

    }).bind('mouseup touchend', function(){

        isDraw = false;

    }).bind('mousemove', function(){

        drawMove(cs.mouse.x, cs.mouse.y);

    }).bind('touchmove', function(){

        drawMove(cs.touch.x, cs.touch.y);

    });

    /*

    cs.setLoop(function () {

        mouseDot.x = cs.mouse.x;

        mouseDot.y = cs.mouse.y;

    }).start();

    */

    function drawBegin(x, y)

    {

        isDraw = true;

        xx = x;

        yy = y;

        var dot = cs.display.arc({

            x: x,

            y: y,

            radius: line_size / 2,

            start: 0,

            end: 360,

            fill: line_color

        });

        cs.addChild(dot);

    }

    function drawMove(x, y)

    {

        if (isDraw)

        {

            var line = cs.display.line({

                start: { x: xx, y: yy },

                end: { x: x, y: y },

                stroke: '' + line_size + 'px ' + line_color,

                cap: "round"

            });

            cs.addChild(line);

            xx = x;

            yy = y;

        }

        else

        {

            mouseDot.moveTo(x, y);

            cs.addChild(mouseDot);

            cs.draw.redraw();

        }

    }

    function clearAll()

    {

        cs.reset();

        // 处理鼠标

        cs.mouse.hide();

        mouseDot = cs.display.arc({

            x: -100,

            y: -100,

            radius: Math.max(line_size / 2, 3),

            start: 0,

            end: 360,

            fill: line_color,

            shadow: '0 0 5px #333'

        });

        cs.addChild(mouseDot);

    }

    </script>

</body>

</html>

程序下载：http://files.cnblogs.com/files/zjfree/ocanvas_draw.rar

ocanvas 画板的更多相关文章

  1. 简易的canvas画板

    没事仿照windows画板工具用canvas实现了一个简易版的画板. html: <!doctype html> <html> <head> <meta ch ...

  2. 一款基于HTML5 Canvas的画板涂鸦动画

    今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...

  3. 使用HTML5的cavas实现的一个画板

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

  4. iOS: 为画板App增加 Undo/Redo(撤销/重做)操作

    这个随笔的内容以上一个随笔为基础,(在iOS中实现一个简单的画板),上一个随笔实现了一个简单的画板:   今天我们要为这个画板增加Undo/Redo操作,当画错了一笔,可以撤销它,或者撤销之后后悔了, ...

  5. 在iOS中实现一个简单的画板App

    在这个随笔中,我们要为iPhone实现一个简单的画板App. 首先需要指出的是,这个demo中使用QuarzCore进行绘画,而不是OpenGL.这两个都可以实现类似的功能,区别是OpenGL更快,但 ...

  6. 用Java语言编写一个简易画板

    讲了三篇概博客的概念,今天,我们来一点实际的东西.我们来探讨一下如何用Java语言,编写一块简易的画图板. 一.需求分析 无论我们使用什么语言,去编写一个什么样的项目,我们的第一步,总是去分析这个项目 ...

  7. 用SignalR实现的共享画板例子

    使用HTML5的canvas画布功能,在页面进行绘画,然后通过SignalR将画布的每个点的颜色提交到服务端,服务端同时将这些画布的信息推送到其他客户端,实现共享同一个画板的功能 类似下图,在某一个浏 ...

  8. java培训第一天--画板

    package day1; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt ...

  9. Python>>>使用Python和Pygame创建画板

    下面是画板截图 # -*- coding: utf-8 -*- import pygame from pygame.locals import * import math class Brush: d ...

随机推荐

  1. laravel 中 与前端的一些事5 之解决缓存问题:version

    Version的主要目的就是解决浏览器的缓存问题,在这个方面,Elixir给出的解决方案很完美 应用场景:当我们的css或者js重新更新了,我们需要告诉浏览器我们不要缓存的css或js静态文件样式时, ...

  2. javascript中对象的深度克隆

    记录一个常见的面试题,javascript中对象的深度克隆,转载自:http://www.2cto.com/kf/201409/332955.html 今天就聊一下一个常见的笔试.面试题,js中对象的 ...

  3. Django1.9开发博客（14）- 集成Xadmin

    xadmin是一个django的管理后台实现,使用了更加灵活的架构设计及Bootstrap UI框架, 目的是替换现有的admin,国人开发,有许多新的特性: 兼容 Django Admin 使用 B ...

  4. setInterval和setTimeout的区别

    setInterval会每隔指定的毫秒数后反复执行指定代码. setTimeout只会在指定的毫秒数后执行一次指定代码. setInterval的用法: // 创建(创建后即开始计时) var int ...

  5. Assembly.Load(path).CreateInstance 反射出错解决办法

    最近采用工厂模式反射DAL层出现一些问题,所以自己想写一下自己认为标准解决的思路和解决方法以备后用. 1.这是项目结构 2.这是DALFactory 反射代码 #region 创建对象(不使用缓存) ...

  6. ionic 安装遇到的问题以及解决方案

    公司里要用到 Ionic 做移动App 混合开发 一个环境搭建折腾了好几天.一是公司权限问题,二是网络问题,你懂得. Ionic 环境搭建官网有教程.本来几行命令就能搞定的事,一旦遇到网络问题,就蛋疼 ...

  7. Node.js 事件

    Node.js 事件 Node.js 所有的异步I/O 操作在完成时都会发送一个事件到事件队列. Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, ...

  8. Java EE注册三部曲（一步曲）

    一步曲(html+servlet+SQL+Bean+Dao+加密(Base64)) 设计思路: 1:编写前台页面jsp:register.jsp,使得用户能够实行注册操作 2:编写servlet:re ...

  9. MAC上python+Eclipse+pydev环境搭建

    转自:http://www.cnblogs.com/Bonker/p/3584707.html 本文重点介绍使用Eclipse+pydev插件来写Python代码,  以及在Mac上配置Eclipse ...

  10. Grand Central Dispatch（GCD）

     GCD      GCD是异步执行任务的技术之一. GCD使用很简洁的记述方法,实现了极为复杂繁琐的多线程编程. dispatch_async(queue, ^{      //长时间处理     ...