3.4.1.1_光标的擦除

来源：互联网发布：超级sql注入工具使用编辑：程序博客网时间：2024/06/16 08:58
3.4.1.1_光标的擦除

<!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));                console.log(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;        //创建新的光标对象        var cursor= new TextCursor(2,fillStyle); ;        saveDrawingSurface();        //canvas事件控制器        canvas.onmousedown = function(e){            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);        }        fontStyleSelect.onchange = function(){            str = fontSizeSelect.value +' '+ fontStyleSelect.value;        }        fontSizeSelect.onchange = function(){            str = fontSizeSelect.value +' '+ fontStyleSelect.value;        }        fontColorSelect.onchange = function (){            fillStyle = fontColorSelect.value;        }        //得到鼠标在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