canvas 画图工具 -- CanvasDraw

最近有些项目中用到了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() }
时间: 2024-12-18 00:43:09

canvas 画图工具 -- CanvasDraw的相关文章

用Canvas制作简单的画图工具

今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1像素的线段? 如果在像素边界处绘制一条1像素宽的垂直线段,那么canvas的绘图环境对象会试着将半个像素画在边界中线的右边,将另外半个像素画在边界中线的左边.然而,在一个整像素的范围内绘制半个像素宽的线段是不可能的,,所以左右两个方向上的半像素都被扩展为1像素.如图所示 本来我们想要将线段绘制在深灰

基于HTML5 Canvas和jQuery 的画图工具的实现

简介 HTML5 提供了强大的Canvas元素,使用Canvas并结合Javascript 可以实现一些非常强大的功能.本文就介绍一下基于HTML5 Canvas 的画图工具的实现.废话少说,先看成品: 该应用是遵循所见即所得(WYSIWYG, What you see is what you get)原则设计的,它具有以下功能: 1. 可以绘制自由曲线.直线.矩形框和文字: 2. 可以根据需要定义线段和矩形框的颜色和宽度: 3. 你可以需要字体的大小.颜色.字体: 4. 支持undo.redo

canvas实现简单的画图工具中画笔效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas实现简单的画图工具中画笔效果</title> </head> <body> <canvas width="500" height="500" style="backg

canvas画图——初级篇

         canvas画图之初级篇 小女子准备将canvas画图分为初级篇,中级篇和高级篇来介绍,读者们不要着急哦. 初级篇 一.首先什么是canvas呢? canvas 是 HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆 布. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现. canvas 英 ['kænv?s]  美 ['kænv?s]   帆布 画布 二.让我们先来了解下canvas的基

[转]html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法

arc与arcTo,从名字都能看出来相似.arcTo也是画曲线的方法,而且他画出的曲线也是正圆的一段弧线.但他的参数和arc简直是不共戴天~ ctx.arcTo(x1,y1,x2,y2,radius);arcTo的参数中包括两个点,而且这两个点中并没有表示圆心的点,仅仅最后的参数是圆的半径,表示arcTo和圆有那么点关系. 网上关于arcTo的文章很少,好不容易找到一篇还是外国的:而且canvas画图木有直观工具,只能靠猜,arcTo害我猜了半天.. 为了直观的描述,我采取了一种辅助办法:arc

[转]html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法

前面的文章我已经讲了3种在canvas中画曲线的方法:arc,arcTo以及quadraticCurveTo.他们都有一个共同点,就是他们画的曲线都只能偏向一边,今天讲的bezierCurveTo与他们最大的不同点就是有两个控制点,即可以画出S形的曲线了. bezierCurveTo,也就是所谓的贝赛尔曲线了,如果你学过某些画图工具,就能马上理解. bezierCurveTo的语法如下: ctx.bezierCurveTo(x1,y1,x2,y2,x,y);他的参数我照例解释一下,其中的(x1,

Canvas画图在360浏览器中跑偏的问题

问题描述,canvas画图的js代码中编写的是画正方形的代码,结果在360浏览器上变成了长方形,不知道怎么回事,请问各位大神是否遇到过此类问题? 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6

画图工具

亿图ppt画图visioONENOTE 如果是由实验数据来做图的话,我个人首推origin.数据导入到做图直至最后的对线形.图例.坐标轴.框图等的修饰的操作都非常容易操作,而且很容易上手.(于是乎我很不理解@章佳杰 同学说的“Origin也用过,不过用的比较少,他对画图方面的操作还是少了点,要修改一些样式之类的不方便.”这句话……)其他如流程图,示意图之类的另当别论,visio.甚至直接用Word.PPT之类都可以很方便来绘制,更不用说Illustrator这种神器了. 如果画示意图,用visi

为什么要用画图工具来画原型?

产品经理每天接触到的工具是在是太多了,平时要接触到的原型图也是各式各样的.不过熊先生最近发现很多同学在用画图工具来画原型,这样确实可以,但是,真的合适么? 首先我们来看现在比较常见的几种画图工具: 1. PS 2. Sketch 3. Fireworks 4. OmniGraffle 每个工具的使用都有其对应的场景,简单的说,就是这些工具的设计者和开发者希望他们的工具是做什么用的. PS:Image editing and compositing. (图像编辑和创作) Sketch:Profes