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. SecureCRT 向多个终端发送相同命令

    选中view,选择command windows 在下方出现的窗口中右键,接下来在窗口中输入命令即可,可以一定程度上代替分发脚本,具体请参考https://www.cnblogs.com/tele-s ...

  2. 微信，支付宝，支付异步通知验签，notify_url

    在支付接口开发中 ,当用户支付完成之后,阿里或者微信会向我们服务器发送一个支付结果的通知,里边带有一系列参数:其中特殊的是签名类型,和签名(他们根据这些参数做出来的签名). 我们的得到这些参数之后要去 ...

  3. 关于linux下如何使用svn 客户端

    1 yum install -y subversion (下载svn) 2 svn chekout "你的svn地址" 然后会询问? 我也不知道是嗄意思 , 大体就是权限什么乱七八 ...

  4. this指的是，调用函数的那个对象。

    恩 http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

  5. jQuery.noop

    一个空函数 当你仅仅想要传递一个空函数的时候,就用他吧.这对一些插件作者很有用,当插件提供了一个可选的回调函数接口,那么如果调用的时候没有传递这个回调函数,就用jQuery.noop来代替执行.

  6. WPF之VLC流媒体播放

    原文:WPF之VLC流媒体播放 最近在做关于在WPF使用VLC流媒体播放的问题,现在可以在WPF中实现VLC本地播放了,流播放解决了,在下面的代码中注释流媒体播放那两段代码,更多的在乎大家摸索了^^, ...

  7. WPF: FishEyePanel/FanPanel - 自定义Panel

    原文:WPF: FishEyePanel/FanPanel - 自定义Panel 原文来自CodeProject,主要介绍如何创建自定义的Panel,如同Grid和StackPanel. 1) Int ...

  8. Post ,Get 请求

    http://blog.csdn.net/pan_junbiao/article/details/9155497

  9. WPF 播放音频使用的SoundPlayer和MediaPlayer

    WPF中,最简单最容易播放音频的方式是使用SoundPlayer类.它是.NET Framework 2.0的一部分,是对Win32 PlaySound API的封装. 它具有以下限制: 1)仅支持. ...

  10. 小记同学一次奇葩的DNS欺骗实验失败经历

    这是一个DNS欺骗实验,使用kali的ettercap.有受害者.攻击者(虚拟机).Web服务器三台机器.受害者的事124.16.70.105虚拟机的是124.16.71.48web服务器是124.1 ...