<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>textAlign</title>
</head>
<body>
 <!-- textAlign:left/right/center/start/end-->

<canvas id="myCanvas" width="578" height="200" style="border: 1px solid #CCC;"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var x = canvas.width / 2;
        var y = canvas.height / 2;

context.font = '30pt Calibri';
        context.textAlign = 'center';
        context.strokeStyle = 'blue';
        context.strokeText('Hello World!',x,y);
    </script>

</body>
</html>

textAlign的更多相关文章

  1. div样式text-align在子元素缩进不规范的情况下，chrome出现的问题（貌似结果是inline-block导致的）

    在调css的时候,发现居然有firefox实现效果完整而chrome出现问题的情况: 详细情况:segmentfault1 segmentfault2 全文表达: <html><he ...

  2. text-align=center 失效原因

    text-align属性是针对 内联元素居中得属性设置,对于块状元素使用margin:0 auto;来控制居中: 笔者在设置一个h2标签时设置了text-align:center;但是却始终出现在中间 ...

  3. margin:0 auto 与 text-align:center

    1.text-align:通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式;            text-align:center 设置文本或img标签等一些内联对象的居中. 2.m ...

  4. margin:0 auto 与 text-align:center 的区别

    基本概念: 1.text-align: 属性规定元素中的文本的水平对齐方式;   该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式;  一般情况下设置文本对齐方式的时使用此属性.支 ...

  5. text-align:justify的使用

    在平常的开发过程中,对于text-align一般用到的是left,center,right,这三个属性都不会陌生.然而,对于justify的使用我却是很陌生.首先有个比较简单的例子. 首先是html代 ...

  6. CSS魔法堂：你真的懂text-align吗？

    前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗? text-align属性详解 The ...

  7. text-align:justify_内容居中对齐

    一直发现text-align : justify这个对齐方式不好使,都不知道为什么么么哒: 因为两端对齐的这个行的结束要一个有空字符串或者别的不可见的字符,用户代理会把这个行的最后几个字符往右边拉,实 ...

  8. 文字对齐之text-align总结

    一.文字对齐总结: 下面是我实际运用中遇到的问题总结: css代码: 效果(段落文字没有对齐): 去掉html中的<p>标签,css样式同样去掉p标签,效果如下(达到预期效果): 为什么在 ...

  9. text-align:-moz-center与text-align:-webkit-center区别与用法

    最近发现各浏览器的不兼容,关于text-align:center这个很多浏览器不兼容. 1.测试发现:text-align:center在IE下是管用的. 2.text-align:-moz-cent ...

  10. 关于text-align无法居中的问题

    昨天项目,一直出现一个无法居中的问题,最后发现竟然是text-align的问题,才发现自己对text-align的理解还是不够透彻,于是在此再举例分析下. css中的元素一共有三类:块元素.行内块和内 ...

随机推荐

  1. Web前端学习笔记之安装和使用PhantomJS

    0x00 安装PhantomJS(linux环境安装) 将PhantomJS下载在/usr/local/src/packet/目录下(这个看个人喜好) 操作系统:CentOS 7 64-bit 1.下 ...

  2. 一个简单的JavaScript实例

    1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  3. 20145304 Exp3 免杀原理与实践

    20145304 Exp3 免杀原理与实践 基础问题回答 (1)杀软是如何检测出恶意代码的? 检验特征码,包含特征码的代码会被杀软认为是恶意代码,例如一些常用恶意代码加壳后就有一个固定的代码会被认为是 ...

  4. Python3基础 函数 未指定返回值，返回NONE

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  5. apache2.4配置多个端口对应多个目录

    文件 /usr/local/apache/conf/extra/httpd-vhosts.conf 的内容如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 NameVir ...

  6. Tempter of the Bone（dfs+奇偶剪枝）题解

    Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  7. HDU1698 Just a Hook（线段树&区间覆盖）题解

    Problem Description In the game of DotA, Pudge’s meat hook is actually the most horrible thing for m ...

  8. NYOJ 116 士兵杀敌（二）（二叉索引树）

    http://acm.nyist.net/JudgeOnline/problem.php?pid=116 题意: 南将军手下有N个士兵,分别编号1到N,这些士兵的杀敌数都是已知的. 小工是南将军手下的 ...

  9. python 删除元组元素

    #create a tuple tuplex = "w", "j" ,"c", "e" print(tuplex) #t ...

  10. telnet不是内部或外部命令的解决方案

    telnet主要是为了维护使用,windows默认不打开这个功能,所有无法登陆 按照下面截图,可轻松打开telnet功能 点击控制面板 选择程序和功能 点击左上角打开 turn windows fea ...