ocanvas 画板

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

效果如下：

主要代码如下：

<!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 画板的更多相关文章

简易的canvas画板
没事仿照windows画板工具用canvas实现了一个简易版的画板. html: <!doctype html> <html> <head> <meta ch ...
一款基于HTML5 Canvas的画板涂鸦动画
今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...
使用HTML5的cavas实现的一个画板
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...
iOS: 为画板App增加 Undo/Redo(撤销/重做)操作
这个随笔的内容以上一个随笔为基础,(在iOS中实现一个简单的画板),上一个随笔实现了一个简单的画板: 今天我们要为这个画板增加Undo/Redo操作,当画错了一笔,可以撤销它,或者撤销之后后悔了, ...
在iOS中实现一个简单的画板App
在这个随笔中,我们要为iPhone实现一个简单的画板App. 首先需要指出的是,这个demo中使用QuarzCore进行绘画,而不是OpenGL.这两个都可以实现类似的功能,区别是OpenGL更快,但 ...
用Java语言编写一个简易画板
讲了三篇概博客的概念,今天,我们来一点实际的东西.我们来探讨一下如何用Java语言,编写一块简易的画图板. 一.需求分析无论我们使用什么语言,去编写一个什么样的项目,我们的第一步,总是去分析这个项目 ...
用SignalR实现的共享画板例子
使用HTML5的canvas画布功能,在页面进行绘画,然后通过SignalR将画布的每个点的颜色提交到服务端,服务端同时将这些画布的信息推送到其他客户端,实现共享同一个画板的功能类似下图,在某一个浏 ...
java培训第一天--画板
package day1; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt ...
Python>>>使用Python和Pygame创建画板
下面是画板截图 # -*- coding: utf-8 -*- import pygame from pygame.locals import * import math class Brush: d ...

随机推荐

学习JQ
目前我对jq的了解还很少,只知道jq比js简单很多,只需引入一个js文件,然后,在js中很多行才能实现的代码,jq中或许一行就搞掂了,比如根据类名获取元素,$(".类名")即可,对 ...
poj1192 最优连通子集（树形dp）
题目链接:poj1192 最优连通子集求一棵无向树的最大子树和..类似于求最大子段和的办法,树形dp. dp[i][0]:以i为根,不包括 i 结点的子树最大权 dp[i][1]:以i为根,包括 i ...
HR函数学习02——分配组织单位
REPORT ZLYHR01. "创建组织单元成功 DATA:LS_OBJ TYPE OBJEC, LV_STU TYPE GDSTR-SVECT, LV_TIT TYPE CHAR20, ...
JVM类加载机制
一.概述 JVM把描述类的数据从class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的java类型,这就是JVM的类加载机制二.类加载过程加载—(验证—准备— ...
关于strcpy和memcpy
strcpy和memcpy都是标准C库函数,它们有下面的特点. strcpy提供了字符串的复制.即strcpy只用于字符串复制,并且它不仅复制字符串内容之外,还会复制字符串的结束符.已知strcpy函 ...
Spring之JDBC模板jdbcTemplate
要使用Jdbctemplate 对象来完成jdbc 操作.通常情况下,有三种种方式得到JdbcTemplate 对象. 第一种方式:我们可以在自己定义的DAO 实现类中注入一个Da ...
计算机网络(5)-----ICMP协议和PING程序
控制报文协议(Internet Control Message Protocol) 定义它是TCP/IP协议族的一个子协议,用于在IP主机.路由器之间传递控制消息.控制消息是指网络通不通.主机是否可 ...
hdu 1041 (OO approach, private constructor to prevent instantiation, sprintf) 分类： hdoj 2015-06-17 15:57 25人阅读评论(0) 收藏
a problem where OO seems more natural to me, implementing a utility class not instantiable. how to p ...
jQuery--index() window.onhashchange
index(): 1. 如果没有参数传给该函数,那么就返回一个整数,为其相对于其兄弟节点的位置. 2. 如果在一个元素集合上调用该函数,并且传入的参数为一个DOM元素或jQuery对象,那么返回一个整 ...
wiglewifi
以上数据是使用wiglewifi软件收集的数据,把全部数据导出为KML格式,使用Google地球显示的,当然在大陆地区Google地球有些不正常,我使用的是lantern 以前使用lantern总是不 ...

ocanvas 画板

ocanvas 画板的更多相关文章

随机推荐

热门专题