老师看下 我的为什么不居中呢
来源:6-2 编程练习
菜鸟00001
2019-04-13 22:00:10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.myCanvas{background-color:lightblue;}
</style>
</head>
<body>
<canvas id="myCanvas" class="myCanvas">
您当前浏览器不支持canvas,请升级您的浏览器。
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var text = '我要变成最棒的前端工程师';
ctx.canvas.width = 600;
ctx.canvas.height = 600;
ctx.beginPath();
ctx.font ='bold 30px sans-serif';
ctx.textAlign ='center';
ctx.textBaseline ='middle';
var textWidth = ctx.measureText(text).width;
ctx.strokeText(text,200,200);
ctx.fillText("text字体宽度是"+textWidth+"px",200,400)
</script>
</body>
</html>
1回答
好帮手慕星星
2019-04-14
你好,水平居中显示需要是canvas画布的一半300,如下修改:
可以重新修改测试下,祝学习愉快!
相似问题