canvas教程

用canvas实现鼠标拖动绘制矩形框

字号+ 作者:H5之家 来源:H5之家 2016-12-24 13:05 我要评论( )

需要用到jCanvas插件和jQuery。 jCanvas下载:https://raw.githubusercontent.com/caleb531/jcanvas/master/jcanvas.min.js 代码如下: 效果大概如下: ...

鼠标拖动绘制矩形框(canvas); CanvasExt = { drawRect:function(canvasId,penColor,strokeWidth){ ; that.penColor=penColor; that.penWidth=strokeWidth; document.getElementById(canvasId); canvas.getBoundingClientRect(); canvasRect.left; canvasRect.top; layer; ; ; ; (e){ that.penColor; that.penWidth; layerIndex++; layer++; layerName+=layerIndex; x canvasLeft; y canvasTop; $(canvasId).addLayer({ type: , strokeStyle: color, strokeWidth: penWidth, name:layerName, fromCenter: false, x: x, y: y, width: 1, height: 1 }); $(canvasId).drawLayers(); $(canvasId).saveCanvas(); (e){ width x; height y; $(canvasId).removeLayer(layerName); $(canvasId).addLayer({ type: , strokeStyle: color, strokeWidth: penWidth, name:layerName, fromCenter: false, x: x, y: y, width: width, height: height }); $(canvasId).drawLayers(); } }; canvas.onmouseup=function(e){ that.penColor; that.penWidth; canvas.onmousemove=null; width x; height y; $(canvasId).removeLayer(layerName); $(canvasId).addLayer({ type: , strokeStyle: color, strokeWidth: penWidth, name:layerName, fromCenter: false, x: x, y: y, width: width, height: height }); $(canvasId).drawLayers(); $(canvasId).saveCanvas(); } } }; drawPen(); function drawPen(){ ; ; CanvasExt.drawRect(,color,width); }

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • C# /windowForm/WPF/SilverLight里面操作Word帮助类提供给大家

    C# /windowForm/WPF/SilverLight里面操作Word帮助类提供给大家

    2016-07-25 10:01

  • canvas绘制中的API

    canvas绘制中的API

    2016-02-01 15:00

  • HTML5 canvas元素背景梦幻小星星闪烁特效

    HTML5 canvas元素背景梦幻小星星闪烁特效

    2016-01-17 09:26

  • 画直线与设置线条的样式如颜色/端...

    画直线与设置线条的样式如颜色/端...

    2015-11-25 09:12

网友点评