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. Android官方教程翻译（6）——添加ActionBar

    The action bar allows you to add buttons for the most important action items relating to the app's c ...

  2. Android开发入门——Andoird Studio的安装与配置

    Android的开发离不开Java,仍然需要对Java进行安装与配置,所以我写了上一篇文章,Java的安装与配置. 开始进行Android Studio的安装与配置. 一.进行配置Java,如果电脑里 ...

  3. sql 连接查询

    什么是连接查询呢 概念:根据两个表或多个表的列之间的关系,从这些表中查询数据. 目的:实现多个表查询操作. 分类 首先划分一下,连接分为三种:内连接.外连接.交叉连接 内连接(INNER JOIN): ...

  4. Android——Intent详解

    Intent组件虽然不是四大组件,但却是连接四大组件的桥梁,学习好这个知识,也非常的重要. 一.什么是Intent 1.Intent的概念: Android中提供了Intent机制来协助应用间的交互与 ...

  5. Redis实战：如何构建类微博的亿级社交平台

    微博及 Twitter 这两大社交平台都重度依赖 Redis 来承载海量用户访问.本文介绍如何使用 Redis 来设计一个社交系统,以及如何扩展 Redis 让其能够承载上亿用户的访问规模. 虽然单台 ...

  6. 取消scrollView上下拉升

    if (ios_Vewsion_5_Or_Above) { _scrollView.bounces = NO; } else { for (id subview in _scrollView.subv ...

  7. 认识ADO.net

    这篇文章源自对刘皓的文章的学习 ADO.NET入门教程(一) 初识ADO.NET 这篇文章非常好,用一张图,以及对图的解释介绍了ado.net组件 ado.net内部主要有两个部分 dataProvi ...

  8. 【翻译自mos文章】对于每个文件的 file.id and file.incarnation number，重命名文件别名

    对于每个文件的 file.id and file.incarnation number,重命名文件别名 參考原文: Rename Alias of Datafile as Per file.id an ...

  9. WPF字体图标——FontAwesom

    原文:WPF字体图标--FontAwesom 版权声明:本文为[CSDN博主:松一160]原创文章,未经允许不得转载. https://blog.csdn.net/songyi160/article/ ...

  10. [nginx]invalid number of arguments

    invalid number of arguments nginx出现以下的错误,基本上错误的原因就是少了后面的分号导致. invalid number of arguments