<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

//Draw a red line at y=100
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();

ctx.font="20px Arial"

//Place each word at y=100 with different textBaseline values
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);

</script>

</body>
</html>

textBaseline的更多相关文章

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

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

  2. HTML5 Canvas ( 文字横纵对齐 ) textAlign, textBaseLine

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

  3. HTML5游戏源码 飞翔的字母 可自定义内容

    相信大家都玩过飞翔的小鸟吧,当然,可能已经有很多人因为这个游戏砸了不少手机.吼吼. 废话不多说,回到主题,源码如下. 博客园上传空间大小有限制,没法上传了,需要打包源码的朋友们请留言邮箱地址.当然还有 ...

  4. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  5. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  6. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  7. IE兼容性问题汇总【持续更新中】

    问题:IE8/9不支持Array.indexOf 解决方案 if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt ...

  8. canvas学习之API整理笔记（一）

    其实canvas本身很简单,就是去学习它的API,多看实例,多自己动手练习,多总结.但是canvas的API实在是有点多,对于初学者来说,可能学到一半就止步不前了.我也有这种感觉,在学习的过程中,编写 ...

  9. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

随机推荐

  1. Centos下安装git高版本2.1.2

    安装依赖软件 # yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel asciidoc # yum in ...

  2. CmsEasy 5.5 cut_image 代码执行漏洞

    3 CmsEasy 5.5 cut_image 代码执行漏洞 3.1 摘要 3.1.1 漏洞介绍 CmsEasy是一款基于PHP+MySQL架构的网站内容管理系统,可面向大中型站点提供重量级网站建设解 ...

  3. 51nod 1266 蚂蚁

    蚂蚁这道题 就是 不管两只蚂蚁相撞  他们会朝自己的反方向走 不过可以这么想  有蚂蚁1 和 蚂蚁2   并且相向而行 如果撞了以后 蚂蚁1和蚂蚁2 就往回走   ,这里可以理解成蚂蚁1,蚂蚁2 继续 ...

  4. 事务（Transaction）

    1.演示转账的功能:(1)创建一张表示学生表表 CREATE TABLE student( id INT PRIMARY KEY AUTO_INCREMENT,name VARCHAR(50), ac ...

  5. UVa 10340 子序列

    https://vjudge.net/problem/UVA-10340 题意: 输入两个字符串s和t,判断是否可以从t中删除0个或多个字符得到字符串s. 思路: 很水的题... #include&l ...

  6. confluence导出pdf 文字显示不全

    当使用confluence编辑页面时,当一行的文字过多,且中间没什么逗号分隔时,有时会出现导出的pdf文件中,这一行显示的文字不全的情况. 如: 很明显费用的费字没有显示完全,且后面还有其他的字. 可 ...

  7. hibernate报错 java.lang.StackOverflowError: null

    在使用hibernate时,报错 java.lang.StackOverflowError: null 把当前线程的栈打满了 java.lang.StackOverflowError: null at ...

  8. Jmeter自动化测试 POST请求和GET请求用if控制器，可以二次开发源码，将请求方式通过数据源传入，就不需要做多余的判断

    Jmeter自动化测试 POST请求和GET请求用if控制器,可以二次开发源码,将请求方式通过数据源传入,就不需要做多余的判断 目前常用的做法:

  9. Qt_QTabWidget_多行

    ZC: 一下是网上搜到的一些信息 ZC: 我只是在 Android环境做了一些测试,别的环境暂未测试... 1.自定义 QTabBar子类 #ifndef MYTABBAR_H #define MYT ...

  10. 《剑指offer》第三十三题（二叉搜索树的后序遍历序列）

    // 面试题33:二叉搜索树的后序遍历序列 // 题目:输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果. // 如果是则返回true,否则返回false.假设输入的数组的任意两个数字都 ...