HTML5 Canvas ( 文字横纵对齐 ) textAlign, textBaseLine
<!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的更多相关文章
- HTML5 <Canvas>文字粒子化
文字粒子化,额或者叫小圆圈化... 1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...
- HTML5 Canvas ( 文字的度量 ) measureText
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 文字的书写和样式控制 ) font, fillText, strokeText
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识
一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...
- HTML5 Canvas 梦幻的文字飞扬动画教程
之前为大家介绍了一款HTML5/CSS3 3D文字特效 文字外翻效果.今天为大家带来的是html5 canvas实现的文字漂动动画效果.画面非常梦幻. 在线预览 源码下载 实现代码如下: html ...
- 基于HTML5 Canvas粒子效果文字动画特效
之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的 ...
随机推荐
- python 二维list取列
b = [i[0] for i in a] # 从a中的每一行取第一个元素.
- Vue 的自定义事件系统：实现子组件跟父组件通信
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件 v-on 写在引用的子组件上, 语句 this.$emit('xxx') ,写在子组件里.
- UOJ 393 【NOI2018】归程——可持久化并查集
题目:http://uoj.ac/problem/393 题解:https://www.cnblogs.com/HocRiser/p/9368067.html 但过不了 UOJ 的 hack 数据.不 ...
- Java数组初始
首先要清楚数组变量与数组对象的概念.数组变量是一个引用变量,可以指向数组对象. int[] a = new int[]{7, 8, 9}; a是数组变量,指向有new创建的数组对象. 数 ...
- vmware 安装 ios 苹果系统
我用的系统是win10... 一.所需软件: 1.下载并安装VMware Workstation Pro 12 密码:7ybc和序列号 密码是:bwm0 2.下载unlocker 203(for OS ...
- 阿里巴巴Java开发手册- 控制语句
1. [强制]在一个 switch 块内,每个 case 要么通过 break / return 等来终止,要么注释说明程序将继续执行到哪一个 case 为止 : 在一个 switch 块内,都必须包 ...
- 添加mysamba
一. 复制/home/tingpan/openwrt/barrier_breaker/feeds/luci/applications文件夹下的luci-samba文件,将文件中的内容samba改为my ...
- android datepicker monthOfYear getMonth(): 获取当前月（注意：返回数值为0..11，需要自己+1来显示）.....
关键点: 1. getMonth(): 获取当前月(注意:返回数值为0..11,需要自己+1来显示) 2. 初始年(译者注:注意使用new Date()初始化年时,需要+1900,如下:dat ...
- 绕过限制，在PC上调试微信手机页面
场景 假设一个手机页面,开发者对其做了限制,导致只能在微信客户端中打开.而众所周知手机上非常不利于调试页面,所以需要能在电脑上打开并进行调试.这里针对常见的三种页面做一下分析,一一绕过其限制,(当然不 ...
- PHP 序列化变量的 4 种方法
摘自: PHP 序列化变量的 4 种方法 http://www.iteye.com/news/25668