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()