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. Cordova热更新和App升级 - 简书

    原文:Cordova热更新和App升级 - 简书 公司的cordova项目前段时间增加了热更新功能,自己第一次做的时候在网上查找了很多资料,有的资料写的并不全面遇到了很多坑.因此总结一些在开发过程中遇 ...

  2. Green the world ：使用monkey_patch

    eventlet的monkey_patch 用于绿化一些python的模块,看看以下的样例就明确了 urls = ["http://www.haha.mx/joke/1292935" ...

  3. React Native细节记录

    1.环境搭建部分 安装完node后建议设置npm镜像以加速后面的过程(或使用***工具).注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别! npm config ...

  4. C#之Linq、where（）、FindAll（）的区别

    原地址 C#之Linq.where().FindAll()的区别 对于实现了IEnumerable接口的类.类型.集合可以使用Linq.Linq的扩展方法where().FindAll()来查询符合谓 ...

  5. 【OC语法要闻速览】一、方法调用

    调用方法 [object method]; [object methodWithInput:input]; output = [object methodWithOutput]; output = [ ...

  6. Entity Framework 6 编译出错的问题（VS2012）

    更新:其实这个问题是由于VS2012的EF代码生成模板是EF 5.x的,自然会与EF6 的runtime不兼容.起初我按照更新前的方式解决了,后来却发现会出现不止这一处命名空间发生改动而导致的问题. ...

  7. uwp - ContentDialog - 自定义仿iphone提示框，提示框美化

    原文:uwp - ContentDialog - 自定义仿iphone提示框,提示框美化 为了实现我想要的效果花费了我很长时间,唉,当初英语不好好学,翻官网翻了半天才找到,分享给刚入门的新手. 首先看 ...

  8. 从源码角度看MySQL memcached plugin——0.大纲

    本系列文章介绍MySQL memcached plugin插件.剖析已经完成.先把链接弄好,内容会陆续补上. 大纲如下: 系统结构和引擎初始化(已完成) 线程模型和连接的状态机 containers表 ...

  9. Spring综合Struts2

    1.1.  Spring综合Struts2 1)        该Spring用户手机WEB-INF下一个 2)        把Spring配置文件配置到web.xml中 <!-- 引入Spr ...

  10. ubuntu如何修改terminal终端的主机名（修改/etc/hostname文件）

    有时候安装完Ubuntu系统后,打开命令终端,终端显示的主机名格式比较难看,例如 我最近买的国内某云的VPS. xxx@VM-1560-ubuntu$ xxx@VM-1560-ubuntu$ 对于有洁 ...