原生canvas制作画图小工具的踩坑和爬坑

最近在写一个类似截图里的简易画图的小工具，画线，画矩形，画圆，可以选择颜色，就像这样

写的过程中遇到了一些坑，还好爬出来了，也得到几位大佬的指点，稍微接触了一下zrender，在这里记录一下。

坑1，绘制过程的预览

用canvas画线没什么问题，moveto和lineto就好了，来一段代码凑字数（:joy:）

鼠标按下，开始绘制，记录初始鼠标的位置startpaint = (e)=>{    this.startpaintflag = true;    this.paintstartx = e.clientx;    this.paintstarty = e.clienty;}鼠标抬起，停止绘制stoppaint = (e)=>{    this.startpaintflag = fal;    }painting = (e)=>{    const {activecolor, activeshape} = this.state;        绘制过程中    if(this.startpaintflag){      const ctx = this.canvas.getcontext("2d");      ctx.strokestyle = activecolor;      ctx.linewidth = 2;      ctx.beginpath();          if(activeshape === 'pen'){        ctx.moveto(this.paintstartx, this.paintstarty);        ctx.lineto(e.clientx, e.clienty);      }      if(activeshape === 'circle'){        const r = math.sqrt(math.pow(e.clientx - this.paintstartx, 2) + math.pow(e.clienty - this.paintstarty, 2));        ctx.arc(this.paintstartx, this.paintstarty, r, 0, 2*math.pi)      }      if(activeshape === 'rect'){        ctx.rect(this.paintstartx, this.paintstarty, e.clientx - this.paintstartx, e.clienty - this.paintstarty);      }      ctx.stroke();            记录保守内力此次移动的最后位置，供下一次绘制使用      this.paintstartx = e.clientx;      this.paintstarty = e.clienty;    }}

但是画矩形和圆就出事了，因为截图工具画矩形和圆的时候，是有预览效果的，就是我一边画，我一边能看到我画出的形状是多大，如果按照画线的思路来，会得到这样的一串图形

很好理解，因为moumove的时候一直在改变位置和距离。那么如果我一开始就记录下位置，在画矩形和圆的时候不改变初始位置呢，那么会得到以下图形

也很好理解，因为没有擦除，每次绘制的图形都在画布上。那擦除不就好了？不好，因为在画布上画的不是只有一个图形，如果我先画线，再画圆，那么一擦除，之前画的线就没了，令人纠结qaq

我有过一个思路是，只擦除这个图形内部的形状，比如上面这一堆同心圆，我只擦除最后绘制的那个圆内部的内容，可惜还是不行，一方面内部可能有别的线事先绘制了，一方面图形可以拖动放大，也可以拖动缩小四川职业学校排名，那么怎么办呢？

在叹了一口大气，喝了一杯水，凝视了一下窗外之后，想出了一个办法，我在画布上再叠一个画布不就好了，我在叠上去的这个画布上就可以为所欲为了不是咩。

来个示意图，黑色框框是我们展示用的画布，黑色形状表示已经绘制上去的内容，红色框框是我们在画有预览效果的图形时所使用的临时画布，红色形状表示我们鼠标拖动过程中绘制的预览内容，每次需要绘制预览内容我们就生成一个临时画布，放在顶层，随心所欲的绘制，绘制完毕（鼠标抬起）将临时画布销毁，在展示用的画布（黑色框框）上绘制最终的图形

来一段代码帮助理解

startpaint = (e) => {  this.startpaintflag = true;  this.paintstartx = e.clientx;  this.paintstarty = e.clienty;  画矩形和圆形时临时生成一个canvas  if (this.state.activeshape !== "pen") {    this.tempcanvas = document.createelement("canvas");    this.tempcanvas.width = this.canvas.width;    this.tempcanvas.height = this.canvas.height;        设置一些定位样式    this.tempcanvas.style.csstext = "position: absolute; top: 0; left: 0; z-index: 0;";        append到需要的容器元素里    document.querylector(".contain").appendchild(this.tempcanvas);  }};stoppaint = (e) => {  this.startpaintflag = fal;  const { activeshape, activecolor } = this.state;  if (activeshape !== "pen") {        从容器元素里删除临时画布    document.querylector(".contain").removechild(this.tempcanvas);    this.tempcanvas = null;        将lastdrawdata记录的绘制数据，绘制到展示用的画布上    const ctx = this.canvas.getcontext("2d");    ctx.strokestyle = activecolor;    ctx.linewidth = 2;    ctx.beginpath();    if (activeshape === "circle") {      const { x, y, r } = this.lastdrawdata;      ctx.arc(x, y, r, 0, 2 * math.pi);    } el {      const { x, y, width, height } = this.lastdrawdata;      ctx.rect(x, y, width, height);    }    ctx.stroke();    this.lastdrawdata = null;  }};painting = (e) => {  const { activecolor, activeshape } = this.state;  if (this.startpaintflag) {    const ctx = this.canvas.getcontext("2d");    ctx.strokestyle = activecolor;    ctx.linewidth = 2;    画线的逻辑不动    if (activeshape === "pen") {      ctx.beginpath();      ctx.moveto(this.paintstart家长要对老师说的话x, this.paintstarty);      ctx.lineto(e.clientx, e.clienty);      ctx.stroke();      this.paintstartx = e.clientx;      this.paintstarty = e.clienty;    } el {      有预览的图形绘制在临时画布上      const tempctx = this.tempcanvas.getcontext("2d");      tempctx.strokestyle = activecolor;      tempctx.linewidth = 2;      每次绘制前清除画布      tempctx.clearrect(0, 0, this.canvas.width, this.canvas.height);      tempctx.beginpath();      if (activeshape === "circle") {        const r = math.sqrt(          math.pow(e.clientx - this.paintstartx, 2) +            math.pow(e.clienty - this.paintstarty, 2)        );        tempctx.arc(this.paintstartx, this.paintstarty, r, 0, 2 * math.pi);        绘制的数据记录在一个变量里        this.lastdrawdata = {          x: this.paintstartx,          y: this.paintstarty,          r,        };      } el {        tempctx.rect(          this.paintstartx,          this.paintstarty,          e.clientx - this.paintstartx,          e.clienty - this.paintstarty        );        this.lastdrawdata = {          x: this.paintstartx,          y: this.paintstarty,          width: e.clientx - this.paintstartx,          height: e.clienty - this.paintstarty,        };      }      tempctx.st犬开头的成语roke();    }  }};

坑2，窗口大小变更

如果画着画着，突然用户将窗口大小变了，你说我是保持画布大小不变呢，还是让画布大小随着窗口改变而改变，如果窗口缩小，那么保持画微笑让生活更美好作文布大小不变是没什么大问题的，但是窗口如果变大，画布区域又是自适应的，那么就不得不跟随改变了，但是canvas的宽高改变的话，内容是会清除的，那么就面临两种选择：

第一种我没试过，不过可想而知如果画的内容多了，应该会闪烁一下，第二种，就我所知有两种形式

第一种，用getimagedata保存图像，改变大小后，用putimagedata绘制，putimagedata只能裁剪图像，不能拉伸const imgdata = ctx.getimagedata(0, 0, canvas.width, canvas.height);canvas.width = newwidth;canvas.height = newheight;ctx.putimagedata(imgdata, 0, 0);第二种，还是创建一个临时画布，将图形绘制下来，改变大小后，用drawimage绘制，drawimage是可以拉伸图像的const newcanvas = document.createelement("canvas");newcanvas.width = canvas.width;newcanvas.height = canvas.height;newcanvas.getcontext("2d").drawimage(canvas, 0, 0);canvas.width = newwidth;canvas.height = newheight;ctx.drawimage(newcanvas, 0, 0);

开始我选的是drawimage，窗口如果不是等比缩放（一般不可能等比），图像可以拉伸，但是拉伸一两次图形就变得很模糊，所以可能还不如不改变图像的比例为好，具体还是看场景

到此这篇关于原生canvas制作画图小工具的踩坑和爬坑的文章就介绍到这了,更多相关canvas画图小工具内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！