使用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. 在应用程序级别之外使用注册为 allowDefinition='MachineToApplication' 的节是错误的

    在MVC中添加授权认证配置之后报了这样的错 原因是在整个MVC项目中有两个Web.Config文件存在authentication节点,一个Web.Config文件在View目录下,一个在根目录下 解 ...

  2. html5常见问题

    H5项目常见问题汇总及解决方案 2016-12-21 FrontEndZQ JavaScript 转自 https://github.com/FrontEndZQ/HTML5-FAQ H5项目常见问题 ...

  3. Merkle Patricia Tree (MPT) 树详解

    1.    介绍 Merkle Patricia Tree(简称MPT树,实际上是一种trie前缀树)是以太坊中的一种加密认证的数据结构,可以用来存储所有的(key,value)对.以太坊区块的头部包 ...

  4. jQuery经典面试题及答案精选（转）

    jQuery是一款非常流行的Javascript框架,如果你想要从事Web前端开发这个岗位,那么jQuery是你必须掌握而且能够熟练应用的一门技术.本文整理了一些关于jQuery的经典面试题及答案,分 ...

  5. Git切换分支出现提示'SSL端口：44301'及解决方案

    切换分支出现如下提示,并且自动签出了项目文件csproj. 修改项目文件csproj 修改前: <UseIISExpress>true</UseIISExpress> < ...

  6. adb error: device not found

    我的adt无法调试一个平板,我的手机却能调试,百度了好多次,折腾了两个周,换了几个版本的adt,都不成. 就在刚才,我在设备管理器找到那个设备Samsung xxx,点更新驱动,自动搜索,那个设备就变 ...

  7. cocos2d-x 中的坐标系

    cocos2d-x 中的坐标系是笛卡尔坐标系,向右为 x 轴正方向,向上为 y 轴正方向,以像素为单位 原点在屏幕左下角的坐标系叫世界坐标系,是整个游戏中的根基,直接添加到场景中的节点,设置的位置都是 ...

  8. 编程技术●Python

    <Python语言入门> 2015-01-16 14:13 ★ 虽然书名叫入门.序里也写了说完全没有编程经验的都可以用这本书来学习入门.不过好像不太适合哦.书很好,内容也挺全面细致的.太好 ...

  9. ios网络学习------4 UIWebView的加载本地数据的三种方式

    ios网络学习------4 UIWebView的加载本地数据的三种方式 分类: IOS2014-06-27 12:56 959人阅读 评论(0) 收藏 举报 UIWebView是IOS内置的浏览器, ...

  10. ubuntu下安装svn服务器

    sudo apt-get install apache2 sudo apt-get install subversion sudo apt-get install libapache2-svn 其次, ...