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