【canvas】基础练习二 文字

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";

　　

时间： 2024-11-25 14:47:40

【canvas】基础练习二 文字的相关文章

五分钟学会 Canvas 基础（二）

0. 前言 相信各位小伙伴读了之前的文章,对 Canvas 基础已经有了一定的认识和了解,但是大家也一定记得我在上一篇文章留了一个小的坑. 就是我没有告诉大家该如何去绘制圆,之所以没有说是因为绘制圆实际上是因为 CanvasRenderingContext2D 对象只提供了两个绘制矩形的方法,并没有直接提供绘制圆,椭圆等几何图形的方法.为了在 Canvas 上绘制更复杂的方法,必须在 Canvas 上启用路径,借用路径来绘制图形. 那么我们现在就一起来看一看,该如何使用路径来绘制圆等图形吧. -

11.分钟学会 Canvas 基础（二）

0. 前言 相信各位小伙伴读了之前的文章,对 Canvas 基础已经有了一定的认识和了解,但是大家也一定记得我在上一篇文章留了一个小的坑. 就是我没有告诉大家该如何去绘制圆,之所以没有说是因为绘制圆实际上是因为 CanvasRenderingContext2D 对象只提供了两个绘制矩形的方法,并没有直接提供绘制圆,椭圆等几何图形的方法.为了在 Canvas 上绘制更复杂的方法,必须在 Canvas 上启用路径,借用路径来绘制图形. 那么我们现在就一起来看一看,该如何使用路径来绘制圆等图形吧. -

canvas基础知识

低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas.检测<canvas id="canvas" width="150" height="200" > 你的浏览器不支持canvas</canvas>var canvas = document.getElementById('canvas');if(canvas.getContext) alert('支持canvas'); >> 绘

canvas基础学习（一）

一.概述 canvas它和其它的HTML5标签的使用基本一致,但是它相当于在浏览器中建立一个画布,可以再这个画布上画图.创建动画甚至是3D游戏.由于canvas要适配不同终端的分辨率,所以尽可能的在标签内设置高度和宽度,这个也符合W3C的标准.代码格式如下,当浏览器不支持canvas标签的时候,会显示其中的文字. <canvas id="main" width="800" height="600" > 亲,您的浏览器不支持canvas

canvas 基础知识整理

canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset=UTF-8> <title>Document</title> <style> #myCanv

Python基础（二）

Python基础(二) Python 运算符(算术运算.比较运算.赋值运算.逻辑运算.成员运算) 基本数据类型(数字.布尔值.字符串.列表.元组.字典.set集合) for 循环 enumrate range和xrange 编码与进制转换 Python 运算符 1.算术运算: 2.比较运算: 3.赋值运算: 4.逻辑运算:  5.成员运算: 基本数据类型 1.数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483

Python之路【第三篇】：Python基础（二）

Python之路[第三篇]:Python基础(二) 内置函数 一 详细见python文档,猛击这里 文件操作 操作文件时,一般需要经历如下步骤: 打开文件 操作文件 一.打开文件 1 文件句柄 = file('文件路径', '模式') 注:python中打开文件有两种方式,即:open(...) 和  file(...) ,本质上前者在内部会调用后者来进行文件操作,推荐使用 open. 打开文件时,需要指定文件路径和以何等方式打开文件,打开后,即可获取该文件句柄,日后通过此文件句柄对该文件操作.

MySQL 基础（二）

MySQL 基础(二) ============================================================================== 概述: ============================================================================== MySQL   1.数据结构: ★分类: 结构化数据:  关系型数据库 半结构化数据:YAML.XML.JSON 非结构化数据:日志文件,NoSQL  

Linux系统基础（二）

            Linux系统基础(二) 一.linux系统结构 1.linux系统结构是倒树型 2. /bin##二进制可执行文件也就是系统命令 /sbin##系统管理命令存放位置 /boot##启动分区,负责系统启动 /dev##设备管理文件 /etc##大多数系统管理文件 /home##普通用户的家目录 /lib##32位系统库文件存放位置 /lib64##64位系统库文件存放位置 /media##系统临时设备挂载点 /mnt##系统临时设备挂载点 /run##系统临时设备挂载点