绘制文本

  • 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里需要以下两步基本操作:

  1. 获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源,也可以通过提供一个URL的方式来使用图片
  2. 使用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 对象,xy 是其在目标 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 笔记三(绘制文本和图片)的更多相关文章

  1. html5 canvas 笔记一(基本用法与绘制图形)

    <canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...

  2. canvas教程(三) 绘制曲线

    经过 canvas 教程(二) 绘制直线 我们知道了 canvas 的直线是怎么绘制的 而本次是给大家带来曲线相关的绘制 绘制圆形 在 canvas 中我们可以使用 arc 方法画一个圆 contex ...

  3. HTML5 Canvas中实现绘制一个像素宽的细线

    正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...

  4. HTML5学习笔记<三>: HTML5样式, 连接和表格

    HTML样式 1, 标签: <style>: 样式定义 <link>: 资源引用 2. 属性: rel="stylesheet": 外部样式表 type=& ...

  5. Html5 Canvas笔记(1)-CanvasAppTemplate代码

    学了一段时间的Html5 Canvas,现想一段一段的将学习笔记整理出来放上来,先整理一段Canvas的模版文件代码,以后建立Canvas程序就不用重新写这些代码了,当然最好是将这个Html代码保存到 ...

  6. Canvas 中drawImage 绘制不出图片

    在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...

  7. 用HTML5 CANVAS做自定义路径的动态效果图片!

    最近对HTML5开始感兴趣了,实现的效果如下图,大家可以从代码里换掉图片 我用的是canvas里面的2d绘图,其中上图的路径是网上在线绘制的,我太懒了,哈哈 下面是网址: http://www.vic ...

  8. 使用HTML5 canvas做地图(3)图片加载平移放大缩小

    终于开始可以写代码了,手都开始痒了.这里的代码仅仅是在chrome检测过,我可以肯定的是IE10以下浏览器是行不通,我一直在考虑,是不是使用IE禁止看我的篇博客,就是这群使用IE的人,给我加了很多工作 ...

  9. HTML5 Canvas ( 线段的绘制 ) beginPath, moveTo, strokeStyle, stroke

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 百度SEO建议

    SEO(Search Engine Optimization)汉译为搜索引擎优化.seo优化是专门利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式.SEO的目的理解是为网站提供生态 ...

  2. Java 语句总结

    一.替代if语句x = a ? b:c; 等价:if (a){ x=b;}else{x=c;}二.页面展示二维数组 <s:iterator var="rt" value=&q ...

  3. 密码有效性验证失败。该密码不够复杂,不符合 Windows 策略要求

    我在sqlserver2005中建立一个用户的时候,我的用户名和密码是一样的,它不允许我建立报“密码有效性验证失败.该密码不够复杂,不符合 Windows 策略要求”错误,我把密码改成其他一些就可以, ...

  4. C# 整形、双精度浮点型、字符串与字节型的相互转化

    整形.双精度浮点型.字符串与字节型的相互转化,如下 using System; using System.Collections.Generic; using System.Linq; using S ...

  5. 初涉MySQL

    本文要点: MySQL基础 安装MySQL 配置MySQL 使用MYSQL 一.MySQL基础 MySQL 由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一个开源的关系型数据 ...

  6. 堡垒机 paramiko代码

    #!/usr/bin/env python # Copyright (C) - Robey Pointer <robeypointer@gmail.com> # # This file i ...

  7. ThinkPHP 自动验证与自动填充无效可能的原因(转)

    自动验证与自动填充是在使用ThinkPHP时经常用到的功能,但偶尔会遇到自动验证与自动填充无效的情况,本文就ThinkPHP 自动验证与自动填充无效可能的原因做一些分析. create() Think ...

  8. ASP.NET的运行原理与运行机制 如何:为 IIS 7.0 配置 <system.webServer> 节

    https://technet.microsoft.com/zh-cn/sysinternals/bb763179.aspx 当一个HTTP请求到服务器并被IIS接收到之后,IIS首先通过客户端请求的 ...

  9. Hadoop学习(1)-- 入门介绍

    Hadoop是Apache基金会开发的一个分布式系统基础架构,是时下最流行的分布式系统架构之一.用户可以在不了解分布式底层的情况下,在Hadoop上快速进行分布式应用的开发,并利用集群的计算和存储能力 ...

  10. ajax get和post请求 后端接收并返回数据

    get请求$(function(){ //alert("23"); var x = "#page"; var y = "${ctx!}/static/ ...