3.3.1_水平与垂直定位

最新推荐文章于 2022-04-09 21:45:18 发布

信封中的阳光

最新推荐文章于 2022-04-09 21:45:18 发布

阅读量416

点赞数

分类专栏： HTML5_CANVAS练习案例

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

版权

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

81 篇文章 1 订阅

订阅专栏

3.3.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);
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="1000" height="600"></canvas>
    </body>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var fontHeight = 24;
        var alignValues = ['start','center','end'];
        var baselineValues = ['top','middle','bottom','alphabetic','ideographic','hanging'];
        var x;
        var y;

        //初始化
        context.font = 'oblique normal bold 24px palatino';

        for(var align = 0;align<alignValues.length;align++){
            for(var baseline = 0; baseline<baselineValues.length;baseline++){
                x = 20+align*fontHeight*15; //文本垂直对齐方式的点
                y = 20 +baseline*fontHeight*3; //文本水平对齐方式的点

                drawText(alignValues[align]+'/'+baselineValues[baseline],alignValues[align],baselineValues[baseline])
                drawTextMarker();
                drawTextLine();

            }
        }
        //绘制文本
        function drawText(text,textAlign,textBaseline){
            if(textAlign){
                context.textAlign = textAlign;
            }
            if(textBaseline){
                context.textBaseline = textBaseline;
            }
            context.fillStyle = 'cornflowerblue';
            context.fillText(text,x,y);
        }
        //绘制标记
        function drawTextMarker(){
            context.save();
            context.fillStyle = 'yellow';
            context.fillRect(x,y,7,7);
            context.strokeRect(x,y,7,7);
            context.restore();
        }
        //绘制水平基准线
        function drawTextLine(){
            context.save();
            context.strokeStyle = 'gray';
            context.beginPath();
            context.moveTo(0,y);
            context.lineTo(canvas.width,y);
            context.stroke();
            context.restore();
        }
    </script>
</html>

信封中的阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.3.1_水平与垂直定位

3.3.1_水平与垂直定位<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>水平与垂直定位</title> <style> body{ background: #eee; }
复制链接

扫一扫