<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <script type="text/javascript" src="../js/jQuery.js"></script>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            outline: none;

            border: none;

        }

        #canvas{

            width: 7rem;

            margin: .25rem 0 0 1.5rem;

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="1000" height="600"></canvas>

</body>

</html>

<script type="text/javascript">

    /**

     * rem 布局初始化

     */

    $('html').css('font-size', $(window).width()/10);

    /**

     * 获取 canvas 画布

     * 获取 canvas 绘图上下文环境

     */

    var canvas = $('#canvas')[0];

    var cxt = canvas.getContext('2d');

    /**

     * 文字的对齐

     * textAlign: left center right

     */

    /*

    cxt.fillStyle = "blue";

    cxt.font = "bold 40px sans-serif";

    cxt.textAlign = "left";

    cxt.fillText("Hello Canvas", 500, 200);

    cxt.textAlign = "center";

    cxt.fillText("Hello Canvas", 500, 300);

    cxt.textAlign = "right";

    cxt.fillText("Hello Canvas", 500, 400);

    cxt.moveTo(500, 0);

    cxt.lineTo(500, 600);

    cxt.stroke();

    */

    /*

     * 文字对齐

     * textBaseLine: top, middle, bottom, alphabetic(拉丁文字), ideographic(汉字), hanging(印度文字)

     */

    cxt.fillStyle = "blue";

    cxt.font = "bold 40px sans-serif";

    cxt.textBaseline = "top";

    cxt.fillText("Hello Canvas", 100, 100);

    cxt.textBaseline = "middle";

    cxt.fillText("Hello Canvas", 100, 300);

    cxt.textBaseline = "bottom";

    cxt.fillText("Hello Canvas", 100, 500);

    cxt.moveTo(0, 100);

    cxt.lineTo(1000, 100);

    cxt.moveTo(0, 300);

    cxt.lineTo(1000, 300);

    cxt.moveTo(0, 500);

    cxt.lineTo(1000, 500);

    cxt.stroke();

</script>

HTML5 Canvas ( 文字横纵对齐 ) textAlign, textBaseLine的更多相关文章

  1. HTML5 <Canvas>文字粒子化

    文字粒子化,额或者叫小圆圈化... 1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...

  2. HTML5 Canvas ( 文字的度量 ) measureText

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. HTML5 Canvas ( 文字的书写和样式控制 ) font, fillText, strokeText

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识

    一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...

  5. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  6. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  7. [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

  8. HTML5 Canvas 梦幻的文字飞扬动画教程

    之前为大家介绍了一款HTML5/CSS3 3D文字特效 文字外翻效果.今天为大家带来的是html5 canvas实现的文字漂动动画效果.画面非常梦幻. 在线预览   源码下载 实现代码如下: html ...

  9. 基于HTML5 Canvas粒子效果文字动画特效

    之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的 ...

随机推荐

  1. 网络流初步：<最大流>——核心（增广路算法）（模板）

    增广路的核心就是引入了反向边,使在进行道路探索选择的时候增加了类似于退路的东西[有一点dp的味道??] 具体操作就是:1.首先使用结构体以及数组链表next[ MAXN ]进行边信息的存储 2.[核心 ...

  2. Xamarin版的C# SVG路径解析器

    原文:Xamarin版的C# SVG路径解析器 Xamarin版的C# SVG路径解析器,对SVG的Path路径进行解析,其中包括: 主程序SvgPathParser.cs, 相关接口定义:ISour ...

  3. FastAdmin selectPage 前端传递查询条件

    ★夕狱-东莞 2018/2/2 16:19:33 selectpage 怎么在前端传递查询条件,看了下源码,好像有个custom,怎么用来的,比如我要下拉的时候,只显示id=1的数据 Karson-深 ...

  4. 一 JAVA整体概念以及安装部署

    JAVA 基本概念  JVM(JAVA virtual machine)java虚拟机,是java的能跨平台的核心,java的跨平台实现,就是在各种系统中布置JVM,然后java应用运行在JVM中,相 ...

  5. 单变量微积分笔记20——三角替换1（sin和cos）

    sin和cos的常用公式 基本公式: 半角公式: 微分公式: 积分公式: 三角替换 示例1 根据微分公式,cosxdx = dsinx 示例2 示例3 半角公式 示例1 示例2 解法1: 解法2: 综 ...

  6. mibox connections

    tcp        0      0 :::52549                :::*                    LISTEN      4398/net.myvst.v2:mt ...

  7. php生成迷宫和迷宫寻址算法实例

    较之前的终于有所改善.生成迷宫的算法和寻址算法其实是一样.只是一个用了遍历一个用了递归.参考了网上的Mike Gold的算法. <?php //zairwolf z@cot8.com heade ...

  8. php 实现欧拉函数Euler

    欧拉函数ph(n)的意思是所有小于n且与n互质的个数.比如说ph(10) = 4{1,3,7,9与10互质} 代码如下: function Euler($x) { $res = $x; $now = ...

  9. hdu 4651 Partition && hdu 4658 Integer Partition——拆分数与五边形定理

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=4651 参考:https://blog.csdn.net/u013007900/article/detail ...

  10. 【比特币】通过dns seeds获取节点列表数据

    通过dns seeds获取节点列表数据 dns seed是什么 返回比特币网络上完整节点IP地址的DNS服务器,用于协助发现节点. 哪里可以查看到 我们在bitcoinj库中,params文件夹内为网 ...