有问题请老师给予指导

首页课程实战体系课手记专栏慕课教程

有问题请老师给予指导

来源：6-2 编程练习

yz_monkey

2020-07-19 01:00:17

<!DOCTYPE html>

<html>

<head>

<title>canvas字体</title>

<style>

canvas{background-color:lightblue;}

</style>

</head>

<body>

<canvas id="canvas" width="800px" height="800px">您的浏览器不支持canvas

</canvas>

var canvas=document.getElementById("canvas");

var context=canvas.getContext('2d');

//此处补充代码

var str1 = "前端路径课程";

context.font = "bold 30px 微软雅黑";

context.fillStyle = "blue";

context.textAlign = "center";

context.textBaseline = "middle";

context.fillText(str1, 400, 400);

var tWidth = context.measureText(str1).width;

var str2 = "字体的width是：" + tWidth + "px";

context.fillText(str2, 400, 500);

</script>

</body>

</html>

当 var tWidth这个变量在var str1这个变量后面的时候width的宽度显示的是60这是为什么呢是默认字体宽度为10px吗？

写回答

1回答

好帮手慕码

2020-07-19

同学你好，宽度为180px是因为设置了30px的缘故，所以当font不设置30px的时候，每个字的宽度是10px；

祝学习愉快~

0 学习 · 6815 问题

查看课程

相似问题

遇到问题，请老师给予解答

回答 2

老师请检查

回答 2

请老师检查

回答 1

老师，我的问题是canvas动画。

回答 2

老师请检查

回答 1

打开慕课网App查看更多内容