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. 华为云软件开发云VS开发痛点=？

    在软件开发的过程中,是不是总会遇到这些问题: 搭建一个开发环境,用了九牛二虎之力,悲催的是竟然用不了…… 团队同事突然出差,他写的代码出现问题,我却不会改…… 提升软件件质量靠代码,交叉看.找大拿,简 ...

  2. 使用Fiddler对android应用抓包 专题

    工作原理 先上个图 此图一目了然,可以看出fiddler在请求中所处的位置,我们就可以确定它能干些什么. WinInet(“Windows Internet”)API帮助程序员使用三个常见的Inter ...

  3. Android中间httpclient发送帧get求

    /** * 採用httpclientGet请求的方式 * * @param username * @param password * @return null表示求得的路径有问题,text返回请求得到 ...

  4. git 修改仓库地址

    公司服务器地址换了 , 原来的git代码地址也跟着需要变 , git remote rm origin 执行该操作 , 删除原来的git地址 git remote -v 查看一下有没有删除成功 , ( ...

  5. Python Numpy基础教程

    Python Numpy基础教程 本文是一个关于Python numpy的基础学习教程,其中,Python版本为Python 3.x 什么是Numpy Numpy = Numerical + Pyth ...

  6. C#更改控制台文本的前景色和背景色

    关键字:C# NET 控制台 前景色 背景色地址:http://www.cnblogs.com/txw1958/archive/2012/12/07/csharp-console-color.html ...

  7. 将python3.1+pyqt4打包成exe

    将python打包成exe的程序有很多,比如py2exe.PyInstaller等等,但是到目前为止,它们对python3.1支持的都不好,所以这里我要介绍一下cx_freeze 4.2.2,它还能支 ...

  8. POJ1236-Network of Schools(Tarjan + 缩点)

    主题链接 题意:给定一张有向图,问最少选择几个点能遍历全图.以及最少加入几条边使得有向图成为一个强连通图. 思路:对于有向图而言,首先求出有几个强连通分量,之后将每一个强连通分量缩点,形成DAG.本题 ...

  9. HDU - 2294 Pendant （DP滚动数组降维+矩阵高速功率）

    Description On Saint Valentine's Day, Alex imagined to present a special pendant to his girl friend ...

  10. linux系统的ssh服务开启方法

      操作方法: 1.编辑sshd_config文件 root@linux:~# vi /etc/ssh/sshd_config 2.检查如下配置项: PasswordAuthentication ye ...