老师这样是对的嘛那后面的小数点要怎么去改变成整数呢

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

来源：6-2 编程练习

qq_慕瓜7049344

2020-08-25 11:14:28

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

canvas {

border: 1px solid #ccc;

}

</style>

</head>

<body>

/** @type {HTMLCanvasElement} */

var canvas = document.getElementById('canvas'),

xt = canvas.getContext('2d'),

str = '前端路径课程',

st = '字体的width是';

canvas.width='500';

canvas.height='500';

xt.fillStyle = 'blue';

xt.font='bold 15px 微软雅黑';

xt.fillText(str, 50, 50);

var width = xt.measureText(st).width;

parseInt(width)

xt.fillText(st+width+'px',40,100);

console.log(width);

</script>

</body>

</html>

写回答

2回答

好帮手慕久久

2020-08-25

同学你好，这回代码正确，很棒，祝学习愉快！

好帮手慕久久

2020-08-25

同学你好，文字没有水平垂直居中显示，建议使用textAlign和baseLine，设置第一行文字水平垂直居中显示，第二行字，在第一行字下面水平居中显示，如下：

问题解答：文字的宽度，可以使用parseInt将其转成整数，如下：

如果我的回答帮到了你，欢迎采纳，祝学习愉快！

hq_慕瓜7049344

h <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> canvas { background: skyblue; } </style> </head> <body> <canvas id="canvas"></canvas> <script> /** @type {HTMLCanvasElement} */ var canvas = document.getElementById('canvas'), xt = canvas.getContext('2d'), str = '前端路径课程', st = '字体的width是'; canvas.width='800'; canvas.height='800'; xt.font='bold 30px 微软雅黑'; xt.fillStyle='blue'; xt.textAlign='center'; xt.textBaseline="middle"; xt.fillText(str,400,400); var width = xt.measureText(st).width; width = parseInt(width); console.log(width); xt.fillText(st+width+"px",400,500); </script> </body> </html>老师这样呢

h020-08-25

共1条回复

0 学习 · 6815 问题

查看课程

相似问题

老师是这样嘛

回答 2

渐变的两个圆心一致好理解，但是老师这里的例子不太理解

回答 4

老师看看这个

回答 5

老师，我的问题是本节的9-2编程练习。

回答 3

对这段代码不是很理解能不能给个详细注释一下

回答 6

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