ocanvas 画板_H5之家 - 中国HTML5教程资源分享第一站

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

ocanvas参考：

效果如下：

主要代码如下：

oCanvas Example; ; $(function(){ $((){ $(); $(); line_color ); mouseDot.fill = line_color; }); $((){ $(); $(); line_size ); mouseDot.radius ); }); }); body, html .tool .tool .color .tool .color div .tool .color div:hover .tool .color .active .tool .size .tool .size div .tool .size div:hover .tool .size .active .tool .size span .btn .btn input ), ctx ); c.width = window.innerWidth; c.height = window.innerHeight; c.addEventListener(); oCanvas.create({ canvas: , background: , fps: 30, disableScrolling: true }); ; ; ; var mouseDot; clearAll(); cs.bind((){ drawBegin(cs.mouse.x, cs.mouse.y); }).bind((){ drawBegin(cs.touch.x, cs.touch.y); }).bind((){ isDraw = false; }).bind((){ drawMove(cs.mouse.x, cs.mouse.y); }).bind((){ 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; 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) { cs.display.line({ start: { x: xx, y: yy }, end: { x: x, y: y }, stroke: line_color, cap: }); 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 ), start: 0, end: 360, fill: line_color, shadow: }); cs.addChild(mouseDot); }

程序下载：