canvas笔记--绘制文本

最新推荐文章于 2023-05-25 01:15:00 发布

努力的豌豆芽

最新推荐文章于 2023-05-25 01:15:00 发布

阅读量284

点赞数

文章标签： canvas js html5

本文链接：https://blog.csdn.net/qq_44758643/article/details/108752909

版权

绘制文本

canvas提供两种方法来渲染文本

fillText(text, x, y [, maxWidth])

在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.

strokeText(text, x, y [, maxWidth\])

在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

绘制填充文本方法实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d'); 
ctx.font='48px serif';
ctx.fillText("Hello world",10,50);
}
    </script>
</html>

在这里插入图片描述

绘制边框文本实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d'); 
ctx.font='48px serif';
ctx.strokeText("Hello world",10,50);
}
    </script>
</html>

效果：

在这里插入图片描述

努力的豌豆芽

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas笔记--绘制文本

绘制文本canvas提供两种方法来渲染文本fillText(text, x, y [, maxWidth])在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.strokeText(text, x, y [, maxWidth\])在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.绘制填充文本方法实例<!DOCTYPE html><html><head> <meta charset="utf-8" />
复制链接

扫一扫