html5 canvas 笔记三(绘制文本和图片)
绘制文本
- fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.
- strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的.
实例:
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
ctx.strokeText("Hello world", 10, 250);
}
设置文本样式
- font = value 当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif.
- textAlign = value 文本对齐选项. 可选的值包括: start, end, left, right or center. 默认值是 start.
- textBaseline = value 基线对齐选项. 可选的值包括: top, hanging, middle, alphabetic, ideographic, bottom. 默认值是 alphabetic.
- direction = value 文本方向. 可能的值包括: ltr, rtl, inherit. 默认值是 inherit.
文本测量
measureText()
将返回一个TextMetrics
对象的宽度、所在像素,这些体现文本特性的属性
实例:获取文本宽度
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;
}
绘制图片
引入图像到canvas里需要以下两步基本操作:
- 获得一个指向
HTMLImageElement
的对象或者另一个canvas元素的引用作为源,也可以通过提供一个URL的方式来使用图片 - 使用
drawImage()
函数将图片绘制到画布上
1>使用相同页面内的图片
document.images
集合document.getElementsByTagName()
方法- 如果你知道你想使用的指定图片的ID,你可以用
document.getElementById()
获得这个图片
2>由零开始创建图像
var img = new Image(); // 创建img元素
img.onload = function(){
// 执行drawImage语句
}
img.src = 'myImage.png'; // 设置图片源地址
注意:若调用 drawImage
时,图片没装载完,那什么都不会发生,因此你应该用load时间来保证不会在加载完毕之前使用这个图片.
绘制图片
drawImage(image, x, y) 其中
image
是 image 或者 canvas 对象,x
和y 是其在目标 canvas 里的起始坐标。
实例:
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
img.src = 'images/backdrop.png';
}
缩放 Scaling
- drawImage(image, x, y, width, height)
切片 Slicing
- drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
html5 canvas 笔记三(绘制文本和图片)的更多相关文章
- html5 canvas 笔记一(基本用法与绘制图形)
<canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...
- canvas教程(三) 绘制曲线
经过 canvas 教程(二) 绘制直线 我们知道了 canvas 的直线是怎么绘制的 而本次是给大家带来曲线相关的绘制 绘制圆形 在 canvas 中我们可以使用 arc 方法画一个圆 contex ...
- HTML5 Canvas中实现绘制一个像素宽的细线
正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...
- HTML5学习笔记<三>: HTML5样式, 连接和表格
HTML样式 1, 标签: <style>: 样式定义 <link>: 资源引用 2. 属性: rel="stylesheet": 外部样式表 type=& ...
- Html5 Canvas笔记(1)-CanvasAppTemplate代码
学了一段时间的Html5 Canvas,现想一段一段的将学习笔记整理出来放上来,先整理一段Canvas的模版文件代码,以后建立Canvas程序就不用重新写这些代码了,当然最好是将这个Html代码保存到 ...
- Canvas 中drawImage 绘制不出图片
在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...
- 用HTML5 CANVAS做自定义路径的动态效果图片!
最近对HTML5开始感兴趣了,实现的效果如下图,大家可以从代码里换掉图片 我用的是canvas里面的2d绘图,其中上图的路径是网上在线绘制的,我太懒了,哈哈 下面是网址: http://www.vic ...
- 使用HTML5 canvas做地图(3)图片加载平移放大缩小
终于开始可以写代码了,手都开始痒了.这里的代码仅仅是在chrome检测过,我可以肯定的是IE10以下浏览器是行不通,我一直在考虑,是不是使用IE禁止看我的篇博客,就是这群使用IE的人,给我加了很多工作 ...
- HTML5 Canvas ( 线段的绘制 ) beginPath, moveTo, strokeStyle, stroke
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Linux就这个范儿 第19章 团结就是力量 LSB是Linux标准化基地(Linux Standards Base)的简称
Linux就这个范儿 第19章 团结就是力量 LSB是Linux标准化基地(Linux Standards Base)的简称 这个图片好可爱,它是LSB组织的图标.你肯定会问:“图标这么设计一定有说 ...
- myeclipse中的web项目导入到eclipse中注意事项,项目部署到tomcat后无法访问jsp文件
打开eclipse,点击空白处,右键可以看到import>general>existing projects into workspace>next>选择你的myeclipse ...
- [BS] 小知识点总结-05
[BS] 小知识点总结-05 1. 不论UIWindow的rootViewController是navC.tabBarC还是VC,也不管modalVC和rootVC中间隔着多少个VC,但是modal出 ...
- eclipse中运行Selenium遇到的问题
1. java.lang.NoClassDefFoundError: 解决方法:eclipse的java工程中导入selenium-java-2.44.0\selenium-2.44.0\libs ...
- 七参数计算正确性验证——Coord软件使用
我计算了一套七参数,但是别人说计算结果不正确,我只好验证一下. 最后知道为啥算错了,原来是尺度K的单位问题,我计算七参数的单位是PPM,而下面软件的单位是m所以需要除以1000000进行计算. 下面是 ...
- shapely and geos break在distance方法
问题 from shapely.geometry import Point print Point(0,0).distance(Point(1,1)) 报错 python: GeometryCompo ...
- SQL Server中使用正则表达式
SQL Server 2005及以上版本支持用CLR语言(C# .NET.VB.NET)编写过程.触发器和函数,因此使得正则匹配,数据提取能够在SQL中灵活运用,大大提高了SQL处理字符串,文本等内容 ...
- PAT 解题报告 1051. Pop Sequence (25)
1051. Pop Sequence (25) Given a stack which can keep M numbers at most. Push N numbers in the order ...
- Leetcode: Count Numbers with Unique Digits
Given a non-negative integer n, count all numbers with unique digits, x, where 0 ≤ x < 10n. Examp ...
- Lintcode: O(1) Check Power of 2
Using O(1) time to check whether an integer n is a power of 2. Example For n=4, return true For n=5, ...