Canvas绘制文本（七）_canvas文字左下角,右下角-CSDN博客

本文链接：https://blog.csdn.net/qq_22520215/article/details/84894003

本文介绍如何在HTML5 Canvas中绘制文本，包括填充和描边文本的方法，并提供了一个示例代码，展示了如何设置文本样式和位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas的文本是以图形形式绘制的，实际他不是文本，只是像文本而已；一旦绘制之后，无法编辑，除非擦除文字，重新绘制。没有充分的理由，最好使用普通的HTML元素，否则一定不要在canvas中创建文本。

context.fillText(text,x,y);
参数x,y表示文字原点（文字左下角位置）
参数text就是文本内容 
此为填充字

context.strokeText(text,x,y);
参数x,y表示文字原点（文字左下角位置）
参数text就是文本内容
此为描边

代码很简单

<!DOCTYPE html>     <!-- 告诉浏览器我们使用的HTML模板为HTML5 -->
<html lang="en">    <!-- 网页页面的根，其他元素均放在其中，只能有一个 -->
<head> <!--页面所有meta元素均包含在这里 -->
  <meta charset="UTF-8">    <!-- 编码方式  -->
  <title>Canves高速入门</title>   <!-- 页面设置名称，显示在浏览器标题栏中 -->
  <!-- CSS 及 javascript 代码放置处 -->
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery库-->
  <script type="text/javascript">
    $(document).ready(function(){
      //alert("HELLO WORLD!!!")
      var canvas = $("#mycanvas");
      var context = canvas.get(0).getContext("2d");

      var text = " hello , world!";
      context.fillStyle = "#124353";     //颜色
      context.font = "italic 30px serif";//斜体 字号 字体
      context.fillText(text,40,40);      //填充字


      context.strokeStyle = "#34ab12";     //颜色
      context.font = "italic 50px serif";//斜体 字号 字体
      context.strokeText(text,100,100);  //勾勒字（描边）
    });
  </script>
</head>
<body>  <!-- 页面的主题内容均在这里 -->
<canvas width="500" height="500" id="mycanvas"  style="background-color: #113344"></canvas>

</body>
</html>

效果图：