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. WPF中的Generic.xaml, theme以及custom control

    原文:WPF中的Generic.xaml, theme以及custom control 在Visual Studio中创建自定义控件时,所有控件都将添加到/Themes/Generic.xaml. 最 ...

  2. Mechanism for self refresh during C0

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

  3. Latex 琐碎

    χ(\chi),Ξ(\Xi),ξ(\xi) 0. 加颜色 x2+y2=z2({\color{Red} {x^2+y^2=z^2}}) Magenta, Cyan, Emerald(宝石绿) 1. 斜杠 ...

  4. HPC —— 高性能计算

    CUDA,目前只有 NVIDIA 支持: OpenCL,CUDA Tesla 卡很贵: 1. 术语及概念 SMP:"对称多处理"(Symmetrical Multi-Process ...

  5. 数据结构 - 只需选择排序(simple selection sort) 详细说明 和 代码(C++)

    数据结构 - 只需选择排序(simple selection sort) 本文地址: http://blog.csdn.net/caroline_wendy/article/details/28601 ...

  6. mongodb与SQL对应关系表

    1. select查询 mongodb使用find要么findOne要查询: find批量查询. findOne查询记录. find有两个参数: 查询条件. 第二个查询返回的字段. 以下是mongod ...

  7. 简单工厂 vs 工厂方法

    设计模式,厂三姐妹是很重要的.现在,让我们来谈谈他们的故事. 简单工厂模式: client的实现须要依靠的是父类和工厂这个类,所以就把子类封装在父类里面,client直接调用父类和工厂类就能够了.可是 ...

  8. JPA示例项(J采纳PA的hibernate实现版本号)

    (1).JPA介绍: JPA全名Java Persistence API ,Java坚持API这是Sun公司Java EE 5规范中提出的Java持久化接口. JPA吸取了眼下Java持久化技术的长处 ...

  9. WPF - 善用路由事件

    原文:WPF - 善用路由事件 在原来的公司中,编写自定义控件是常常遇到的任务.但这些控件常常拥有一个不怎么好的特点:无论是内部还是外部都没有使用路由事件.那我们应该怎样宰自定义控件开发中使用路由事件 ...

  10. 带参跳转其他controller

    public class GoToOtherController : Controller { public ActionResult Index() { var vm = new GetValueF ...