demo1 fillText strokeText绘制文字

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title> fillText strokeText</title>

</head>

<body>

<canvas id="wapper" width="500" height="500"></canvas>

<script>

	var wapper = document.getElementById('wapper'),

		_2d = wapper.getContext('2d');/*2d的绘制对象*/

	_2d.font='30px Arial';

	_2d.fillText('dtdxrk',50,50);/*fillText(text,x,y,max width)*/

	_2d.strokeText('dtdxrk',50,100);/*strokeText(text,x,y,max width)*/

</script>

</body>

</html>

　　

demo2 字体 大小 粗细

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>字体 大小 粗细</title>

</head>

<body>

<canvas id="wapper" width="500" height="500"></canvas>

<script>

	var wapper = document.getElementById('wapper'),

		_2d = wapper.getContext('2d');/*2d的绘制对象*/

	_2d.font='30px Arial';

	_2d.fillText('dtdxrk',10,30);/*fillText(text,x,y,max width)*/

	_2d.font='italic 40px simsun';

	_2d.fillText('dtdxrk',10,100);/*fillText(text,x,y,max width)*/

	_2d.font='bold 22px simsun';

	_2d.fillText('dtdxrk',10,150);/*fillText(text,x,y,max width)*/

</script>

</body>

</html>

　　

demo3 文字对齐 textAlign textBaseline

感觉没啥好说的

http://www.w3school.com.cn/tags/canvas_textalign.asp

_2d.textAlign="center|end|left|right|start";

　　

http://www.w3school.com.cn/tags/canvas_textbaseline.asp

_2d.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

　　

【canvas】基础练习二 文字的更多相关文章

  1. canvas API ，通俗的canvas基础知识（一）

    在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...

  2. canvas 基础知识整理（二）

    html部分: <canvas id="myCanvas" width="800" height="800" ></can ...

  3. canvas基础简单易懂教程（完结，多图）

    目录 Canvas学习 一. Canvas概述 1.1 Hello world 1.2 Canvas的像素化 1.3 Canvas的动画思想 1.4 面向对象思维实现canvas动画 二.Canvas ...

  4. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  5. canvas基础之旅

    canvas 主要使用2D rendering context  API 实现其功能和特效. canvas 一般浏览器都支持,但在ie9之前的是不支持的.(解决办法:添加IxplorerCanvas ...

  6. canvas 基础知识整理（一）

    canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...

  7. 《HTML5 CANVAS基础教程》读书笔记

    一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

  8. canvas 基础知识

    canvas 基础 低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas. 检测支持canvas <canvas id="canvas" wi ...

  9. java 基础知识二 基本类型与运算符

    java  基础知识二 基本类型与运算符 1.标识符 定义:为类.方法.变量起的名称 由大小写字母.数字.下划线(_)和美元符号($)组成,同时不能以数字开头 2.关键字 java语言保留特殊含义或者 ...

随机推荐

  1. linux 网卡配置文件详解

    配置文件位置:/etc/sysconfig/network-scripts/ifcfg-eth0 1. DEVICE=eth0 网卡的名字 2. HWADDR=00:0c:29:90:89:d9 HW ...

  2. 关于java项目与web项目中lib包的那点事

    一.在java项目中如何引入外部jar包:1.在我们的java项目下新建一个lib文件夹:2.将我们需要引入的jat包复制到lib文件夹下:3.选中我们lib包下的jar,右键选择Build Path ...

  3. Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置

    在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...

  4. HTML5 的成长之路

    html5历史 w3c从2008年提出html5的概念,目前html5的版本已经趋于稳定,也逐步得到了业界的认可和接受. 以前我们有一个疑问,HTML5与Flash究竟谁将在移动互联网时代称霸市场?这 ...

  5. Mechanism for self refresh during C0

    An embodiment may be an apparatus comprising a link coupled with a memory, and circuitry coupled wit ...

  6. VAssist 使用技巧（函数声明定位，比VS的还要强大）

    1. 有了VAX可以关掉C++导航栏,快捷键ALT+M,显示当前打开文档的所有符号,而且可以输入进行过滤 2. 查找文件,shift+alt+o (直接定位) 3. 查找符号shift+alt+s 4 ...

  7. Android的APK文件的反编译方法【转】

    实用的收藏一下. 来自:http://www.dewen.org/q/711/%E8%AF%B7%E6%95%99Android%E7%9A%84APK%E6%96%87%E4%BB%B6%E7%9A ...

  8. c#调api串口通讯

    原文:c#调api串口通讯 在调试ICU通信设备的时候,由于串口通信老出现故障,所以就怀疑CF实现的SerialPort类是否有问题,所以最后决定用纯API函数实现串口读写. 先从网上搜索相关代码(关 ...

  9. DOS符号转义（转 http://www.robvanderwoude.com/escapechars.php）

    Escape Characters Character to be escaped Escape Sequence Remark % %% May not always be required in ...

  10. UVA - 825Walking on the Safe Side(dp)

    id=19217">称号: UVA - 825Walking on the Safe Side(dp) 题目大意:给出一个n * m的矩阵.起点是1 * 1,终点是n * m.这个矩阵 ...