3.4.1_指示文本输入位置的光标

最新推荐文章于 2024-01-05 07:45:00 发布

信封中的阳光

最新推荐文章于 2024-01-05 07:45:00 发布

阅读量289

点赞数

分类专栏： HTML5_CANVAS练习案例

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/71404126

版权

HTML5_CANVAS练习案例专栏收录该内容

81 篇文章 1 订阅

订阅专栏

3.4.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();
            }
        }
    </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 fillStyle = fontColorSelect.value;
        var str = fontSizeSelect.value +' '+ fontStyleSelect.value;


        //创建新的光标对象
        var cursor = new TextCursor(2,fillStyle);

        //canvas事件控制器
        canvas.onmousedown = function(e){
            var loc = windowToCanvas(e.clientX,e.clientY);
            context.font = str;
            cursor.fillStyle = fillStyle;
            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)
            }
        };
    </script>
</html>

信封中的阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.4.1_指示文本输入位置的光标

3.4.1_指示文本输入位置的光标<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>指示文本输入位置的光标</title> <style> body{ background: #eee; }
复制链接

扫一扫

专栏目录