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 ...

随机推荐

Bitmap旋转方法
最近在做一个ORC图片解析的功能,要求解析出数字但是发现他解析只能解析横着的图片,然后我拍照的时候拍的是竖直照片,当然你也可以去旋转照相机的屏幕但是我这里为了方便选择的是竖直拍出来然后,旋转下咯 ...
python的基础类源码解析——collection类
1.计数器(counter) Counter是对字典类型的补充,用于追踪值的出现次数. ps:具备字典的所有功能 + 自己的功能 ################################### ...
51nod 1445 变色DNA(dij)
题目链接:51nod 1445 变色DNA 看了相关讨论再去用最短路:val[i][j]之间如果是'Y',说明i可以到达j,并且i到达j的代价是i那行 1到j-1 里面'Y'的数量. 最后,求 0到n ...
怎么改变 placeholder字体颜色
::-webkit-input-placeholder{color: #888}::-moz-placeholder{color: #888}:-moz-placeholder{color: #888 ...
Linux有用命令
1.nohup命令使用方法:nohup ./run.sh 作用:忽略所有挂断(SIGHUP)信号,不挂断地运行命令
Linux 学会这些基本可以啦
1,Linux 内壳文件:cat /etc/issue OR /etc/redhat-release ubuntu[apt-get install -y vim] centos[yum install ...
Android开源框架：Universal-Image-Loader解析（一）
之前花了一些时间,好好看了下这个框架,于是决定再重新梳理一下,把整个处理方法和流程过一遍,俗话说:温故而知新嘛关于Universal-Image-Loader此框架的各种优点,稍微介绍下,网上应该也 ...
hdu 2079
ps:昨天刚做了个母函数的,觉得不太熟,今天又是母函数..很好.. 代码: #include "stdio.h" #include "string.h" ]; ...
Hibernate的many-to-many双向关联的配置办法
<?xml version="1.0"?><!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibern ...
React Native组件之Switch和Picker和Slide
React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...

ocanvas 画板

ocanvas 画板的更多相关文章

随机推荐

热门专题