canvas 模拟文本输入光标效果

canvas虽然没有文本输入的API
但是我们可以利用它先有的模拟一个
后续我会继续补充完整 以达到可以文字输入的效果

效果如图

并且鼠标可以在canvas任意位置点击移动光标

var canvas=document.getElementById("canvas")
var context=canvas.getContext("2d")
var drawingSurfaceImageData;
var blinkingInterval;
var BLINK_ON=500;
var BLINK_OFF=500;
context.font="40px Arial"
context.fillText("这是一个canvas模拟光标闪烁效果",10,50)
TextCursor=function(width,fillStyle){
  this.fillStyle=fillStyle||"rgba(0,0,0,0.5)"
  this.width=width||2;
  this.left=0;
  this.top=0


}

TextCursor.prototype={
   getHeight:function(context){
    var h=context.measureText("Wwwwww").width; //measureText 测量文字宽度
    return h+h/6;
   },
   createPath:function(context){
    context.beginPath();
    context.rect(this.left,this.top,this.width,this.getHeight(context))
   },
   draw:function(context,left,bottom){
    context.save()
    this.left=left;
    this.top=bottom-this.getHeight(context)  //通过底部减去光标高度 得到矩形的顶部位置
    this.createPath(context)
    context.fillStyle=this.fillStyle;
    context.fill();
    context.restore()
    },
    erase:function(context,imageData){
       context.putImageData(imageData,0,0,this.left,this.top,this.width,this.getHeight(context))

    }


}
function windowToCanvas(e){
   var bbox=canvas.getBoundingClientRect()
   return{
        x:e.clientX-bbox.left,
        y:e.clientY-bbox.top
   }

}


function saveDrawingSurface(){  //复制整个canvas图像的数据
drawingSurfaceImageData=context.getImageData(0,0,canvas.width,canvas.height)

}

function blinkCursor(loc){
   blinkingInterval=setInterval(function(){
      cursor.erase(context,drawingSurfaceImageData)
      setTimeout(function(e){
        cursor.draw(context,cursor.left,cursor.top+cursor.getHeight(context)) //这时候cursor里面的属性已经初始化好了 直接可以用cursor.left
      
      },BLINK_OFF)

   },BLINK_ON+BLINK_OFF)

}
function moveCursor(loc){
    cursor.erase(context,drawingSurfaceImageData)
    cursor.draw(context,loc.x,loc.y)  //这里完成鼠标第二次点击的位置 并传给cursor 初始化cursor里面的left top width getHeight
    if(!blinkingInterval){
        blinkCursor(loc)
    }
}




var cursor=new TextCursor()
canvas.onmousedown=function(e){

  var loc=windowToCanvas(e)
  moveCursor(loc)

}
saveDrawingSurface()