-_-#【Canvas】绘制文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="drawing" width="200" height="200" style="background:gray;">A drawing of something</canvas>
<script>
var drawing = document.getElementById('drawing')
if (drawing.getContext) {
var context = drawing.getContext('2d') context.font = 'bold 14px arial'
context.textAlign = 'center'
context.textBaseline = 'middle'
context.fillText('12', 100, 20) // 如果将 textAlign 设置为"start",则 x 坐标表示的是文本左端的位置
context.textAlign = 'start'
context.fillStyle = 'rgba(0,0,255,0.5)'
context.fillText('12', 100, 40) // 则 x 坐标表示的是文本右端的位置
context.textAlign = 'end'
context.fillStyle = 'rgba(255,0,0,0.5)'
context.fillText('12', 100, 60) context.textAlign = 'start'
var fontSize = 100
context.font = fontSize + 'px arial' // 返回一个 TextMetrics 对象。返回的对象目前只有一个 width 属性,但将来还会增加更多度量属性
while (context.measureText('Hello world!').width > 140) {
fontSize--
context.font = fontSize + 'px arial'
}
context.fillText('Hello world!', 10, 10)
}
</script>
</body>
</html>
-_-#【Canvas】绘制文本的更多相关文章
- canvas绘制文本
canvas绘制文本 属性和方法 font = value 设置字体 textAlign = value 设置字体对齐方式 start, end, left, right, center textBa ...
- canvas 绘制文本
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- canvas绘制文本自动换行
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- HTML5 canvas绘制文本
demo.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset=" ...
- FontMetrics ----- 绘制文本,获取文本高度
Canvas 绘制文本时,使用FontMetrics对象,计算位置的坐标. public static class FontMetrics { /** * The maximum distance a ...
- html5 canvas 笔记三(绘制文本和图片)
绘制文本 fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, ma ...
- Javascript高级编程学习笔记(88)—— Canvas(5)绘制文本
绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- canvas绘制文字
绘制字体时可以使用fillText方法或者strokeText方法. fillText方法用填充的方式来绘制字符串 context.fillText (text, x,y,[maxwidth]); s ...
- html5 canvas绘制圆形印章,以及与页面交互
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Java笔试题二:读程序
public class SopResult { public static void main(String[] args) { int i = 4; System.out.println(&quo ...
- 基于laravel4.2的相关架构设计
项目组不久前引进了laravel框架,本人参与了laravel的调研和项目架构设计.个人认为项目架构中基于laravel的有些设计还是比较实用和有借鉴性的,现将一些设计分享给大家,希望能和大家共同学习 ...
- IE浏览器中设为首页
<a onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('<%=Configurati ...
- Linux 网络配置(固定IP)
通常linux作为服务器系统时,是不推荐安装图形界面的,因此我们需要掌握非图形界面下如何配置网络,主要两种方式,如下: 一.使用SETUP工具(redhat系列才可以,推荐此修改方式) 1.在命令行直 ...
- tomcat启动项目内存溢出问题
catalina.bat文件的第二行加下面的即可: 注意最大内存设置,和系统的内存有关系 set JAVA_OPTS=%JAVA_OPTS% -Xms512m -Xmx1024m -XX:PermSi ...
- Css简介
- ios开发常见问题及解决办法
1 . storyboard连线问题 产生原因:将与storyboard关联的属性删除了,但是storyboard中还保持之前所关联的属性. 解决: 点击view controller 点击这排 ...
- 本地代码上传 -> Github
首先在控制台cd到你的本地项目,这里以teat为例 1.执行命令: git init 2.将项目文件添加到仓库中: git add . (可以是指定文件,将“.”转换为指定文件) 3.接下来com ...
- Swift - 05 - 数值型字面量
//: Playground - noun: a place where people can play import UIKit var str = "Hello, playground& ...
- jQuery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...