夜光带你走进前端工程师（十九）

最新推荐文章于 2019-06-01 18:15:57 发布

GeniusTeam-夜光

最新推荐文章于 2019-06-01 18:15:57 发布

阅读量162

点赞数

分类专栏： My thoughts 前端工程师

本文链接：https://blog.csdn.net/weixin_41987706/article/details/90676386

版权

My thoughts 同时被 2 个专栏收录

911 篇文章 25 订阅

订阅专栏

前端工程师

48 篇文章 0 订阅

订阅专栏

夜光序言：

是不是有一天，你会开着心车，而公路无际无边。是不是有一天，你会躲着记忆，而岁月缠绕不休。是不是有一天，你会看着天空，而孤单四下蔓延。是不是有一天，你会哭不出声，而生命已经没有了播放键。

正文：

这种效果：

起始位置，结束位置，注释掉，如下效果：

起始位置，终止位置十分重要：

Canvas绘制文字

// 十分仔细审查每一部分元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas绘制文字</title>
    <script type="text/javascript" src="wenzi.js"></script>
    <style type="text/css">
        body{
            margin: 0;
            padding:0;
        }
    </style>     //联系margin，padding 可以看出紧贴左上角
</head>
<body οnlοad="draw('canvas')">
<canvas id="canvas" width="800" height="300"></canvas>
</body>
</html>

Context.font

有三个参数：

Context.font=“font-weight【加粗】 font-size【字体】 font-family”

font-weight【加粗】

值	描述
Normal	默认值
bold	粗体
bolder	更粗
lighter	更细
100 200 300 400 500 600 700 800 900	粗到细 400=normal 700=bold

JS:代码

/**
* Created by on 2018/4/9.
*/
function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.fillStyle = 'green';
    context.fillRect(0,0,800,300);
    context.fillStyle = '#fff';
    context.strokeStyle = '#fff';
    context.font = "bold 40px 微软雅黑"
    context.fillText('创客学院',50,50);
    context.strokeText('创客学院',50,100);

}

1：设置文字垂直对齐方式：

属性值：top(顶部对齐) ， hanging（悬挂）， middle(中间对齐) ，bottom(底部对齐)

Context.textbaseline = “”

/**
* Created by on 2018/4/9.
*/
function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.fillStyle = 'green';
    context.fillRect(0,0,800,300);
    context.fillStyle = '#fff';
    context.strokeStyle = '#fff';
    context.font = "bold 40px 微软雅黑";
    context.textBaseline = "hanging";
    context.fillText('创客学院光灵',0,50);
    context.fillText(' 光灵带来的创造性编程',40,150);  //通过横纵坐标来锁定位置
/*    context.strokeText('创客学院',50,100);*/

}

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进前端工程师（十九）

夜光序言：是不是有一天，你会开着心车，而公路无际无边。是不是有一天，你会躲着记忆，而岁月缠绕不休。是不是有一天，你会看着天空，而孤单四下蔓延。是不是有一天，你会哭不出声，而生命已经没有了播放键。正文：这种效果：起始位置，结束位置，注释掉，如下效果：起始位置，终止位置十分重要：Canvas绘制文字...
复制链接

扫一扫