canvas ps 仿制图章

思路

图片绘制到画板
当键盘alt键和鼠标左键同时按下时，获取光标附近图像并记录
当松开alt键，按住鼠标左键拖动时，绘制记录的图像到路径上
通过用记录图片覆盖原图像来达到效果

具体代码片段

初始化canvas

<canvas id="canvas" width="800" height="800"></canvas>

获取到画板，并绘制图片到画板

canvas = document.getElementById("canvas");
//二维画板
ctx = canvas.getContext("2d");
//画笔笔触颜色
ctx.strokeStyle = "red";
//创建空白图片
var img=new Image()
//填充图片数据
img.src="images/14.png"; 
//图片加载完毕 
img.onload = function ()   
{  
    var w = img.width
    var h = img.height
    //参数分别是 图片数据，绘制的x,y,width,height
    ctx.drawImage(img,0,0, w, h);
}

监听键盘alt键按下松开

//判断是否键盘alt键被按下
document.onkeydown = function(event){
    if (event.key == "Alt") 
    {
        isAltDown = true;
    }
}
//判断是否键盘alt键被放开
document.onkeyup = function(event){
    if (event.key == "Alt") 
    {
        isAltDown = false;
    }
}

监听鼠标按下松开移动等操作

//鼠标移动
canvas.addEventListener("mousemove",eventMove,false);
//鼠标按下
canvas.addEventListener("mousedown",eventDown,false);
//鼠标松开
canvas.addEventListener("mouseup",eventUp,false);
//鼠标进入canvas区域
canvas.addEventListener("mouseenter",eventEnter,false);
//鼠标离开canvas区域
canvas.addEventListener("mouseleave",eventLeave,false);

获取光标附近图像

function eventDown(event){
    //判断鼠标左键
  if (event.button == 0) {
        //获取鼠标光标当前所在点
        var mouseX =event.pageX-this.offsetLeft;
        var mouseY =event.pageY-this.offsetTop;

        //alt键按下
        if (isAltDown) {
            //记录光标附近30像素的图像
          self.drawImagePixelData = ctx.getImageData(mouseX+15, mouseY+15, 30, 30);
          return;
        }
        //记录鼠标左键按下
        isMouseDown = true;
        //判断是否存在可以绘制图像
        if (self.drawImagePixelData) {
            //绘制记录图像到原图像上
          ctx.putImageData(self.drawImagePixelData, mouseX-15, mouseY-15);
        }
  }
}

绘制到原图像

function eventMove(event){

    //获取鼠标光标当前所在点
  var mouseX =event.pageX-this.offsetLeft;
  var mouseY =event.pageY-this.offsetTop;

  //判断鼠标是否按下
  if (isMouseDown) {
        //more point
        if (event.changedTouches) 
        {
            event = event.changedTouches[0];
        }
        //绘制图像
        if (self.drawImagePixelData) {
          ctx.putImageData(self.drawImagePixelData, mouseX-15, mouseY-15);
        }
  }
}

鼠标松开状态处理

function eventUp(event){
  event.preventDefault();
  if (isAltDown) {
      return;
  }
  isMouseDown = false;
  ctx.save();
}

也可以自定义一个光标。
定义一个div标签，根据鼠标的实时位置去更新它的坐标，当alt键按下时，也可以给它更换图像。

整理思路大概就是这样，如果感兴趣就自己试一下吧