<!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. c++第五天：默认初始化

    1.算数类型.(整型和浮点型) 类型决定了数据所占的比特数以及该如何解释这些比特的内容. 练习2.1... 各种类型在计算机中所占的比特数不同,解释方法不同.有符号要花费一个比特存储符号,最大正值要比 ...

  2. 微信小程序新闻列表功能（读取文件、template模板使用）

    微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件 ...

  3. 20145305 《网络对抗》MSF基础应用

    实践过程及结果截图 主动攻击ms08_067 Kali的IP:10.43.46.93 靶机的IP:10.43.49.28 MS08_067远程漏洞攻击实践:Shell 攻击成功的结果 在kali上执行 ...

  4. windows 常用快捷键和dos命令

    快捷键 win + R 打开dos命令行窗口 win + E 打开资源管理窗口 (计算机) shift + 鼠标右击 + select 在此处打开命令窗口 可在资源管理目录下打开dos命令 windo ...

  5. Code First技术介绍

    地址:https://wenku.baidu.com/view/5620b862eefdc8d376ee3258.html 仅供参考

  6. HttpClient 的使用

    HttpClient使用: maven: <!-- https://mvnrepository.com/artifact/org.apache.httpcomponents/httpclient ...

  7. insert into 和 where not exists

    https://social.msdn.microsoft.com/Forums/sqlserver/en-US/3569bd60-1299-4fe4-bfa1-d77ffa3e579f/insert ...

  8. ajax专题

    什么是ajax?他可以用来做什么? 1.首先,ajax不是一种编程语言,是一种在无需重新加载整个网页的情况下能够更新部分网页的技术. 优点:通过和后台服务器进行少量的数据交换,网页就能异步的局部跟新, ...

  9. Ubuntu 16.04 kinetic 编译指定包

    编译指定包 catkin_make -DCATKIN_WHITELIST_PACKAGES=baoming 使用上述命令后catkin_make会一直编译上面那个包,想要编译全部包,使用 catkin ...

  10. Window系统下用Ant实现Java项目的自动构建和部署

    https://blog.csdn.net/xinxin19881112/article/details/7297021 Step 1: 从官网下载Ant包,官网地址http://ant.apache ...