canvas 模拟文本输入光标效果

作者 : 开心源码 本文共1839个字,预计阅读时间需要5分钟 发布时间: 2022-05-11 共78人阅读

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

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » canvas 模拟文本输入光标效果

发表回复