ocanvas 画板

      2020-05-14 23:23      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);}

程序下载: