JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：1786 次日期：2016-07-08 15:22:35

温馨提示：小编为您整理了“JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)”,方便广大网友查阅！

本文实例讲述了JS基于ocanvas插件实现的简单画板效果。分享给大家供大家参考，具体如下：

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

效果如下：

主要代码如下：

<!DOCTYPE html>

<html>

<head>

<title>oCanvas Example</title>

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>

</div>

</div>

</div>

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>

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：jQuery EasyUI中DataGird动态生成列的方法

下一篇：JS简单编号生成器实现方法(附demo源码下载)

手机网站地址：JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！