资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

基于html5中canvas做批改作业小插件的示例分析-创新互联

这篇文章给大家分享的是有关基于html5中canvas做批改作业小插件的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

成都创新互联是一家专注于成都网站设计、成都网站制作、外贸网站建设与策划设计,永靖网站建设哪家好?成都创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:永靖等地区。永靖做网站价格咨询:18982081108

需求分析


  1. 能进行批改,就是相当于画笔

  2. 能进行画笔的撤回功能

  3. 能进行全部画笔的清除功能

  4. 可以转化画笔的颜色

技术上的实现思路


在听到这需求后的第一反应就是用canvas来做,所以我在w3school阅读了 canvas的API .

1.将图片转到canvas,用到API: drawImage()

2画笔的实现

  • 当按下鼠标(mousedown)记录开始点startX, startY

  • 当移动鼠标的时候(mousemove)就获取当前的鼠标的坐标e.clientX, e.clientY,获取到了当前的坐标后,与上一个点的坐标轴的左边进行连线(lineTo ),这样就能画出了一条横线了

  • 当鼠标松开左键(mouseup)时候,就清除mousemove的函数

3.清除功能:讲原始的图片再次用drawImage()函数来重置
4.撤回功能:在每次按下鼠标那时候,用getImageData()函数获取当前的图像记录到数组里面,然后按撤回则使用putImageData()函数放在canvas
5.画笔的颜色:在mousemove里面改变strokeStyle笔的颜色

代码实现


移动鼠标画出线条的代码

let self = this;
    this.canvasNode = document.createElement('canvas');
    let styleString = this.utils.formatStyle(CANVAS_STYLE); // CANVAS_STYLE是canvas的样式
    this.canvasNode.setAttribute('id','canvas');
    // 一定要设置这width 和 height
    let ratio = this.imgNode.width / this.imgNode.height, height = this.imgNode.height, width = this.imgNode.width;
    let tempWidth , tempHeight;
    // 按比例伸缩
    if(ratio >= window.innerWidth / window.innerHeight){
      if(width > window.innerWidth){
        tempWidth = window.innerWidth;
        tempHeight = height * window.innerWidth / width;
      } else {
        tempWidth = width;
        tempHeight = height;
      }
    }else{
      if(height > window.innerHeight){
        tempWidth = width * window.innerHeight / width;
        tempHeight = window.innerHeight;
      }else{
        tempWidth = width;
        tempHeight = height;
      }
    }
    this.canvasNode.height = tempHeight;
    this.canvasNode.width = tempWidth;
    styleString = Object.assign({'width': tempWidth, 'height': tempHeight}, CANVAS_STYLE);
    this.canvasNode.setAttribute('style', styleString);

    let ctx = this.canvasNode.getContext('2d'), startX = 0, startY = 0;
    let image = new Image() ;
    image.setAttribute("crossOrigin",'Anonymous')
    // 加时间戳因为这图片的域名没设置跨域/tupian/20230522/upgrade
    image.src = this.imgNode.src + '?t=' + new Date().getTime(); 
    image.height = tempHeight;
    image.width = tempWidth;
    image.onload = function(){
      ctx.drawImage(image, 0, 0, tempWidth, tempHeight);
    }
    // 鼠标移动事件
    let mousemoveFn = function(e) {
      ctx.beginPath();
      ctx.lineWidth = 3;
      ctx.strokeStyle = self.currentColor;
      if(startX == e.clientX - self.canvasNode.offsetLeft || startY ===  e.clientY - self.canvasNode.offsetTop  ) return
      ctx.moveTo(startX,startY);
      ctx.lineTo(e.clientX - self.canvasNode.offsetLeft , e.clientY - self.canvasNode.offsetTop );
      ctx.stroke();
      startX = e.clientX - self.canvasNode.offsetLeft;
      startY = e.clientY - self.canvasNode.offsetTop ; // 37是header的高度
    }
    // 鼠标按下事件
    this.canvasNode.addEventListener("mousedown",function(e){
      startX = e.clientX - self.canvasNode.offsetLeft;
      startY = e.clientY - self.canvasNode.offsetTop ;

      // 如果在mouseup那里记录 则在撤回时候要做多一个步骤
      let imageData = ctx.getImageData(0,0, self.canvasNode.width, self.canvasNode.height);
      self.imageDataArray.push(imageData); // 这imageDataArray用来记录画笔的笔画
      self.canvasNode.addEventListener("mousemove", mousemoveFn, false);
    },false);
    this.canvasNode.addEventListener('mouseup', function(e){
      self.canvasNode.removeEventListener('mousemove', mousemoveFn);
    });
    this.bgNode.appendChild(this.canvasNode);

遇到的问题

1.图片的跨域问题   因为这个域名只设置了192.168.6.*的跨域,所以我localhost的域名会报跨域的问题(只对192.168.6.*的跨域是同事告诉我的,不然我还在傻乎乎的查问题)

解决办法:设置vue.congfig.js文件的dev下的host

2.图片的按比例伸缩完按保存后图片的尺寸变了   我用toDataURL()方法输出的base64后的图片尺寸变了。原因:在我把图片draw上canvas上时候,用了上面代码的图片那比例伸缩的算法把图片变小了,所以画在canvas上的图片也变小了...

解决办法:(待解决)

总结


  • 第一次接触canvas与图片相结合的功能,让我熟悉了canvas的api

  • 在遇到没做过的功能之前,一定要先定下心来运用你所知道的知识思考下有没可行的方法,找到了突破点就可以做了

  • 在你碰上不熟悉的知识时候,一定要先看api,我这canvas之前不怎么会的,之后我细看了几遍的api,我就可以上手去做功能了,并且在w3school看到的例子让我觉得canvas真的很强大

感谢各位的阅读!关于“基于html5中canvas做批改作业小插件的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


新闻名称:基于html5中canvas做批改作业小插件的示例分析-创新互联
当前路径:http://cdkjz.cn/article/jgcho.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220