Javascript入门阶段——写文字和警告框

朝花夕拾明月夜

于 2020-10-18 19:55:27 发布

阅读量2.7k

点赞数 10

分类专栏： JS Level1(入门课程) 文章标签： html css canvas

本文链接：https://blog.youkuaiyun.com/YWX_KB/article/details/109148564

版权

JS Level1(入门课程) 专栏收录该内容

10 篇文章

订阅专栏

1. 课程大纲

使用fillText的方法在画布上写文字
使用ctx(画笔)的font属性设置文字的字体和大小
使用alert方法，在浏览器窗口中弹出警告框

2.1 画飞机

在画布上画四架飞机，四架飞机的位置为正方形的四个角。

确定四架飞机的位置。

画四架飞机，四架飞机的位置为正方形的四个角，代码如下：

enemy.onload = function(){
	ctx.drawImage(enemy,100,100);
	ctx.drawImage(enemy,200,100);
	ctx.drawImage(enemy,100,200);
	ctx.drawImage(enemy,200,200);
}

2.2 fillText方法——写文字

ctx.fillText(1,2,3)

fillText方法用于实现在画布上写文字
fillText方法的小括号里，由两个逗号分隔成了3个部分，在1处放置你要写的文字；在2处放置所写文字位置的X坐标；在3处放置所写文字位置的Y坐标；
注意：fillText方法，T需要大写；
在画布上坐标为(100,200)处写“优快云”，代码如下：

<!DOCTYPE html>
<html>
	<title>test01</title>
	<canvas id="myCanvas" 
	width="500" 
	height="500"></canvas>
<body>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillText("优快云",100,200);

</script>	
</body>
</html>

在画布上坐标为(100,200)处写“优快云”，显示效果如下

效果示意图
实操：在点(100,300)处写一句话，代码如下：

ctx.fillText("我爱编程，我爱优快云",100,300);

2.3 ctx.font设置文字的大小和字体

ctx.font = "a b";

ctx(画笔)的font属性用于设置文字的字体和大小；
从上面可以看出，font属性后面是一个等号，等号后面是一对双引号，双引号里面用空格分成了两部分，在a处放置文字的大小，b处放置文字的字体；
设置文字的大小为40px，字体为楷体，在画布(100,200)处写“优快云”，代码如下：

ctx.font = "40px 楷体";
ctx.fillText("优快云",100,200);

我们用ctx.font对文字属性进行设置，font后面用赋值运算符"="连接，把文字大小与字体种类赋值给ctx.font，文字大小与样式用双引号引起来，中间用空格分成两部分。
写文字fillText方法小括号里由三部分组成，第一部分是书写的内容，在这里是直接写的文字需要用双引号引起来，后面用逗号分隔的两个数值分别是x轴和y轴的坐标值。

实操：使用80px的字号，微软雅黑字体，在界面上写出“优快云”

代码如下：

<!DOCTYPE html>
<html>
	<title>test01</title>
	<canvas id="myCanvas" 
	width="500" 
	height="500"></canvas>
<body>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font = "80px 微软雅黑"
ctx.fillText("优快云",100,200);

</script>	
</body>
</html>

2.4 alert方法——警告框

alert( );

alert方法用于实现在浏览器窗口中弹出一个警告框；
alert后米娜是一对小括号，小括号里面即为在警告框中显示的内容；
在浏览器窗口中弹出一个警告框，上面显示的内容是"你好，优快云"，注意要显示的内容用双引号括起来，代码如下

alert("你好，优快云");

在浏览器窗口中弹出一个警告框，上面显示的内容是“你好，优快云”，显示效果如下

代码如下：

<!DOCTYPE html>
<html>
	<title>test01</title>
	<meta http-equiv="Content-Type" 
	content="text/html; charset=utf-8" />
	<canvas id="myCanvas"
	 width="500" height="500"></canvas>
<body>
<script>
alert("你好，优快云")
</script>	
</body>
</html>

实操：做一个警告框
在这里插入图片描述
代码为：

<!DOCTYPE html>
<html>
	<title>test01</title>
	<meta http-equiv="Content-Type" 
	content="text/html; charset=utf-8" />
	<canvas id="myCanvas" 
	width="500" height="500"></canvas>
<body>
<script>
alert("您的支付宝余额为：10000");
</script>	
</body>
</html>