3.4.1.2_光标的闪烁效果_清定时器版本
来源:互联网 发布:scala 知乎 编辑:程序博客网 时间:2024/06/17 00:52
3.4.1.2_光标的闪烁效果_清定时器版本
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>光标的闪烁效果</title> <style> body{ background: #eee; } #canvas{ background: #fff; cursor: pointer; margin-left: 10px; margin-top: 10px; box-shadow: 4px 4px 8px rgba(0,0,0,0.5); -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5); -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5); } #controls{ position: absolute; left: 25px; top: 25px; } </style> </head> <body> <canvas id="canvas" width="1000" height="600"></canvas> <div id="controls"> 字体: <select id="fontStyleSelect"> <option value="palatino">palatino</option> <option value="lucida">lucida</option> <option value="fantasy">fantasy</option> <option value="copperplate">copperplate</option> <option value="tahoma" selected>tahoma</option> <option value="verdana">verdana</option> <option value="impact">impact</option> <option value="century">century</option> </select> 字体大小: <select id="fontSizeSelect"> <option value="20px" selected>20px</option> <option value="30px">30px</option> <option value="40px">40px</option> <option value="50px">50px</option> <option value="60px">60px</option> </select> 字体填充颜色: <select id="fontColorSelect"> <option value="red">red</option> <option value="green">green</option> <option value="blue">blue</option> <option value="orange">orange</option> <option value="cornflowerblue" selected>cornflowerblue</option> <option value="goldenrod">goldenrod</option> <option value="navy">navy</option> <option value="purple">purple</option> </select> </div> </body> <!-- 可以单独保存为一个独立的JS文件 --> <script> //组合使用构造函数与原型模式 TextCursor = function (width,fillStyle){ this.width = width || 2; this.fillStyle = fillStyle || 'rgba(0,0,0,0.5)'; this.left = 0; this.top = 0; }; TextCursor.prototype = { //设置光标高度为当前字体的字符框值的1又6分之一 getHeight:function(context){ var h = context.measureText('M').width; //得到字符框值 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)); } } </script> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var fontStyleSelect = document.getElementById('fontStyleSelect'); var fontSizeSelect = document.getElementById('fontSizeSelect'); var fontColorSelect = document.getElementById('fontColorSelect'); var drawingSurfaceImageData; var fillStyle = fontColorSelect.value; var str = fontSizeSelect.value +' '+ fontStyleSelect.value; //光标闪烁定时器---设置1000ms内,700ms显示,300ms隐藏 var blinkingInterval; var blinkingInterval11; var blink_show = 700; var blink_hide = 300; //创建新的光标对象 var cursor= new TextCursor(2,fillStyle); ; //保存画布数据 saveDrawingSurface(); //canvas事件控制器 canvas.onmousedown = function(e){ //注意这里因为是定时器套定时器,所以要两个都消掉 clearInterval(blinkingInterval); clearInterval(blinkingInterval11); var loc = windowToCanvas(e.clientX,e.clientY); context.font = str; cursor.fillStyle = fillStyle; //这里erase的left,top在没有执行draw之前,记录的正是上一次的光标点的left,top,width,height cursor.erase(context,drawingSurfaceImageData); cursor.draw(context,loc.x,loc.y); //因为上种方式的弊端,试着每次清定时器,点击鼠标后重开,这样就没有点下鼠标马上就会消失的效果 blinkCursor(loc); } fontStyleSelect.onchange = function(){ str = fontSizeSelect.value +' '+ fontStyleSelect.value; } fontSizeSelect.onchange = function(){ str = fontSizeSelect.value +' '+ fontStyleSelect.value; } fontColorSelect.onchange = function (){ fillStyle = fontColorSelect.value; } //光标闪烁函数 function blinkCursor(loc){ blinkingInterval=setInterval(function(){ //鼠标点击时执行了draw,也就是说,left,top的值,已更新到当前光标位置 cursor.erase(context,drawingSurfaceImageData); //清除持续300ms //300ms后执行 blinkingInterval11 =setTimeout(function(){ cursor.draw(context,loc.x,loc.y); },blink_hide); },blink_show+blink_hide); } //得到鼠标在canvas画布中的坐标 function windowToCanvas(x,y){ var bbox = canvas.getBoundingClientRect(); return { x:x-bbox.left*(canvas.width/bbox.width), y:y-bbox.top*(canvas.height/bbox.height) } }; //保存画布数据 function saveDrawingSurface(){ drawingSurfaceImageData = context.getImageData(0,0,canvas.width,canvas.height); } </script></html>
0 0
- 3.4.1.2_光标的闪烁效果_清定时器版本
- 3.4.1.2_光标的闪烁效果
- 3.4.1.1_光标的擦除
- android动画效果_图片闪烁
- 3.4.1_指示文本输入位置的光标
- [wxWidgets]_[中级]_[阻止窗口闪烁的方法]
- 使用定时器timer实现按钮闪烁的效果
- 多线程_几种定时器的写法
- 多线程_几种定时器的写法
- 多线程_定时器的概述和使用
- 光标闪烁问题的解决办法
- ubuntu光标闪烁的解决办法。
- Tiny6410_SD卡启动_闪烁的led裸机程序
- Linux 时钟_定时器
- Linux 时钟_定时器
- 98_定时器,计时器
- 单片机_定时器/计数器
- 定时器_随笔
- 剑指Offer——(17)树的子结构
- Python eventlet
- JSP笔记与实验室管理系统更改的心得
- 417. Pacific Atlantic Water Flow
- Hibernate关联关系配置(一对多、一对一和多对多)
- 3.4.1.2_光标的闪烁效果_清定时器版本
- css优先级
- 让程序员跳槽的非钱原因
- Linux下的Mysql性能测试工具 sysbench
- 代码动态修改shape属性
- 堆和栈的区别
- 生产环境中使用Docker Swarm的一些建议
- 利用windows批处理定期访问数据库远程备份文件【1】
- 回调函数