码迷,mamicode.com
首页 > 其他好文 > 详细

canvas 画图工具 -- CanvasDraw

时间:2017-01-20 00:19:26      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:上层   .com   github   onclick   图像   取图   canvas   css   href   

最近有些项目中用到了canvas画图;

为了方便封装了一下:

 

他的强大之处是 处理了各种偏针的问题:

  1,css 强制宽高的变形 造成的偏针

  2,给canvas加边 造成的偏针

  3,上层父级缩放 造成的偏针 ( 前两种函数自行校正,第3种要传参)

更多去 github 吧,记得点赞谢谢

CanvasDraw:https://github.com/songyijian/CanvasDraw

 

       var c2=new CanvasDraw(‘#canvas2‘,{
            ‘attr‘:{‘width‘:400,‘height‘:400}, 
            ‘lineWidth‘:4 ,
            ‘scale‘:[0.7],     //这里处理canvas 父级的缩放
            ‘strokeStyle‘:‘red‘,
            ‘initFn‘:function(_this){},
            ‘moveFn‘:function(_this){}
        });
    //获取图像
        ncreate[1].onclick=function(){ imgBox.src=c2.getImg(); }
    //清理滑板
        nremove[1].onclick=function(){ c2.clearRect() }

 

canvas 画图工具 -- CanvasDraw

标签:上层   .com   github   onclick   图像   取图   canvas   css   href   

原文地址:http://www.cnblogs.com/SongYiJian/p/6309051.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!