prototype鼠标指针_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; //measureTe