-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path4.绘制文本.html
134 lines (113 loc) · 3.65 KB
/
4.绘制文本.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
canvas{
border:1px solid black;
}
#kno{
width: 500px;
height: auto;
float: left;
font-size: 18px;
}
</style>
<script type="text/javascript">
window.onload=function(){
//获取元素
var canvas01=document.getElementById("canvas01");
var canvas02=document.getElementById("canvas02");
var canvas03=document.getElementById("canvas03");
//确定浏览器支持<canvas>元素
if(canvas01.getContext){
//一.比较textAlign
//取得上2d下文
var context=canvas01.getContext("2d");
//引入时钟的模型
//开始路径
context.beginPath();
//绘制外圆
context.arc(100,100,99,0,2*Math.PI,false);
//绘制内圆
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI,false);
//绘制分针
context.moveTo(100,100);
context.lineTo(100,15);
//绘制时针
context.moveTo(100,100);
context.lineTo(35,100);
//描边路径
context.stroke();
context.font="bold 14px Arial ";
context.textAlign="center";
context.textBaseline="middle";
context.fillText("12",100,15);
context.textAlign="start";
context.fillText("12",100,40);
context.textAlign="end";
context.fillText("12",100,60);
//二.比较textBaseline
//重新获取2d环境
context=canvas02.getContext("2d");
//引入时钟的模型
//开始路径
context.beginPath();
//绘制外圆
context.arc(100,100,99,0,2*Math.PI,false);
//绘制内圆
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI,false);
//绘制分针
context.moveTo(100,100);
context.lineTo(100,15);
//绘制时针
context.moveTo(100,100);
context.lineTo(35,100);
//描边路径
context.stroke();
context.font="bold 14px Arial ";
context.textAlign="center";
context.textBaseline="middle";
context.fillText("12",100,15);
context.textBaseline="top";
context.fillText("12",80,15);
context.textBaseline="bottom";
context.fillText("12",120,15);
//三.学习measureText
//重新获取2d环境
context=canvas03.getContext("2d");
var fontSize=100;
context.font=fontSize+"px Arial";
while(context.measureText("hello world!").width>100){
fontSize--;
context.font=fontSize+"px Arial";
}
context.textAlign="start";
context.textBaseline="middle";
context.fillText("hello world!",10,10);
context.fillText("font size is"+fontSize+"px",10,50);
}
}
</script>
<body>
<!-- canvas元素-->
<canvas id="canvas01" width="200px" height="200px"></canvas>
<canvas id="canvas02" width="200px" height="200px"></canvas>
<canvas id="canvas03" width="200px" height="200px"></canvas>
<!-- 知识点和问题汇总 -->
<div id="kno">
<b>知识点：</b> <br/>
<strong>1.</strong>绘制文本的方法：fillText()和strokeText()，一般用fillText() <br/>
<strong>2.</strong>上述方法的属性：font、textAlign、textBaseline <br/>
<strong>3.</strong>fillText(文本字符串,x,y,最大像素宽度(可选)) <br/>
<strong>4.</strong>context.font="样式 大小 字体 "; <br/>
<strong>5.</strong>textAlign：center、start、end <br/>
<strong>6.</strong>textBaseline：middle、top、bottom <br/>
<strong>7.</strong>context.measureText(文本).width <br/>
</div>
</body>
</html>