textBaseline
<!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的更多相关文章
- [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...
- HTML5 Canvas ( 文字横纵对齐 ) textAlign, textBaseLine
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5游戏源码 飞翔的字母 可自定义内容
相信大家都玩过飞翔的小鸟吧,当然,可能已经有很多人因为这个游戏砸了不少手机.吼吼. 废话不多说,回到主题,源码如下. 博客园上传空间大小有限制,没法上传了,需要打包源码的朋友们请留言邮箱地址.当然还有 ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- HTML5移动开发学习笔记之Canvas基础
1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...
- IE兼容性问题汇总【持续更新中】
问题:IE8/9不支持Array.indexOf 解决方案 if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt ...
- canvas学习之API整理笔记(一)
其实canvas本身很简单,就是去学习它的API,多看实例,多自己动手练习,多总结.但是canvas的API实在是有点多,对于初学者来说,可能学到一半就止步不前了.我也有这种感觉,在学习的过程中,编写 ...
- [JS,Canvas]日历时钟
[JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
随机推荐
- sublime3 离线安装插件
直接去:https://packagecontrol.io/installation搜索插件,插件一般会有个git网址(格式化html的插件可以用这个:https://github.com/victo ...
- 20145106《Java程序设计》第7周学习总结
教材学习内容总结 使用Lambda的特性可以去除重复的信息,以取得语法的简洁,增加程序代码的表达性.Lambda表达式本身是中性的,不代表任何类型的实例,同样的Lambda表达式,可用来表示不同目标类 ...
- CEF解决加载慢问题
转载:http://blog.csdn.net/weolar/article/details/51994895 CEF加载慢的时候,加上以下代码,通过命令行的方式: CefRefPtr<CefC ...
- java在访问https资源时的证书信任问题
java程序在访问https资源时,出现报错 sun.security.validator.ValidatorException: PKIX path building failed: sun.sec ...
- Python3基础 while 阶乘
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- 在ubuntu bionic下对基于qemu的arm64进行linux内核5.0.1版本的编译和运行
一.环境介绍 OS:ubuntu bionic 64bit 二.准备工作 2.1 安装必要的开发工具 sudo apt-get install git flex bison build-essenti ...
- Elasticsearch 基础概念知识
接近实时(NRT) Elasticsearch是一个接近实时的搜索平台.这意味着,从索引一个文档直到这个文档能够被搜索到有一个轻微的延迟(通常是1秒). 集群(cluster) 一个集群就是由一个或多 ...
- 51nod 1413 权势二进制
本来刚开始还是想用每一位 -1的个数 然后再乘以10 不断累加 后来发现 完全不是这回事啊 因为本身就是0 和 1 所以只要记录出现的最大的数字 就是答案 因为 n >= 1 // 所以不 ...
- 论文笔记之:Dynamic Label Propagation for Semi-supervised Multi-class Multi-label Classification ICCV 2013
Dynamic Label Propagation for Semi-supervised Multi-class Multi-label Classification ICCV 2013 在基于Gr ...
- python 获取当前时间戳
#!/usr/bin/python # -*- coding: UTF- -*- import time; # 引入time模块 ticks = time.time() print("当前时 ...