使用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. angular router-ui

    将模块注入到控制器中的方法: 1.export module 2.在router中resolve解决: 2.1 resolve中直接return值 /*ngInject*/ worker : 'hi' ...

  2. HTML 文本格式化<b><big><em><i><small><strong><sub><sup><ins><del>

    <b> 标签-粗体 定义和用法: <b>标签规定粗体文本. 提示和注释 注释:根据 HTML5 规范,在没有其他合适标签更合适时,才应该把 <b> 标签作为最后的选 ...

  3. SSM框架学习之高并发秒杀业务--笔记2-- DAO层

    上节中利用Maven创建了项目,并导入了所有的依赖,这节来进行DAO层的设计与开发 第一步,创建数据库和表. 首先分析业务,这个SSM匡济整合案例是做一个商品的秒杀系统,要存储的有:1.待秒杀的商品的 ...

  4. WCF初探-14：WCF服务协定

    前言: 在前面的文章中,我们定义的服务协定上都会有一个ServiceContract的特性来修饰,这是因为服务契约的实现要靠ServiceContractAttribute 属性定义,然后使用一个或多 ...

  5. PHP 缓存扩展opcache

    opcache (全程 zend opcache): 从php5.5开始,默认提供的php脚本缓存扩展,编译php5.5时加上参数--enable-opcache就可以编译opcache了,只是要启用 ...

  6. spark0.9.1 assembly build-RedHat6.4 YARN 2.2.0

    1. Install git on RedHat6.4: 1.1. setup your local yum repo 1.2. yum install git 2. Install JDK and ...

  7. vector 的 push_back[转]

    vector是用数组实现的,每次执行push_back操作,相当于底层的数组实现要重新分配大小(即先free掉原存储,后重新malloc):这种实现体现到vector实现就是每当push_back一个 ...

  8. jetty启动不能保存

    主要原因是jetty缓存的静态页面不能被修改.只需要在web.xml文件中配置如下: <servlet>    <!-- Override init parameter to avo ...

  9. excel 两列 找出相同的值

    excel 有A,B两列数值,要找出A,B两列中数值相同的值. 选中B列,格式——条件格式——公式  输入:=countif(A:A,B1)  在格式中可选择突出字体颜色 该函数的语法规则如下: co ...

  10. 如何获取EntityManager

    1.在容器内部使用,使用@PersistenceContext 来注入.@PersistenceContextprivate EntityManager em;TAG================= ...