HTML5 Canvas 中的分数字体大小？

HTML5 canvas API 使开发人员能够以多种方式在 HTML 页面上编写文本，例如在画布上。不同的浏览器在 HTML5 canvas 上提供各种字体大小，尤其是在字体大小为浮点数（如 2.456 px、3.4 px 等）时。

那么，如何在 HTML5 canvas 中将分数字体大小应用于文本？

首先，让我们看看什么是 HTML5 canvas。

什么是 HTML5 Canvas？

基本上，canvas 是网页中一个矩形封闭区域。默认情况下，它没有边框和内容。HTML5 的 canvas 元素使用户能够使用 javascript 在网页上绘制动态 2D 图形并添加图片。它由 <canvas> 标签表示。此元素受 Chrome、Safari、Internet Explorer、Firefox 以及 Opera 支持。

默认情况下，canvas 元素的高度为 150px，宽度为 300px。根据您的需要，您可以使用 CSS 自定义其大小和边框。

语法

<canvas id= “” ></canvas>

示例

<html>
<body>
   <canvas id= “demo” height= “170” width = ”260” style = “border: 2px solid #000000;” ></canvas>
</body>
</html>

让我们看看如何设置分数字体大小。

示例

<!DOCTYPE html>
<html>
<head>
   <script>
      function example() {
         const canvas = document.getElementById('demo');
         canvas.height = 1000;
         const context = canvas.getContext('2d');
         const min = 10;
         const height = 100;
         for (let i=min; i< 20; i+=0.1){
            const font_size = Math.round(i*10000)/10000;
            context.font = i + "px Calibri";
            context.fillText("This text is of font size   " +  font_size, 20, (font_size-min)*height);
         }   
      }
   </script>
</head>
   <body onload="example()">
   <canvas id="demo"> </canvas>
</body>
</html>

其中，

.

  • example() 是一个函数，它告诉浏览器设置 id = “demo” 的 HTML5 canvas 的字体大小。

  • canvas 是一个变量，用于在代码中编辑 HTML5 canvas。

  • context 是一个变量，包含 getContext() 函数，该函数用于访问 canvas 标签的绘图函数。

  • min 是一个变量，指定 HTML 页面中文本的最小字体大小。

  • height 是一个变量，指定 HTML 页面中每行的高度。

  • for 循环 在我们的代码中用于将字体大小设置为 context.fillText 中指定的文本。这里，for 循环遍历 i 的值，即从 10 到 20。操作完成后，每次循环 i 的值增加 0.1 。

  • Math.round(i*10000)/10000 用于将字体大小四舍五入到最接近 10000 的数字。因此，答案将保留 4 位小数。

  • fillText() 方法用于在画布上添加填充文本

语法

object.fillText ( text, x, y, max width);

参数

  • text − 指的是要写在画布上的文本。

  • x − 指定画布上文本开始写入点的 X 坐标

  • y − 指定画布上文本开始写入点的 Y 坐标

  • max width − 以像素为单位指定文本的最大宽度

示例

<script>
   const a = document.getElementById( “demo”);
   const context = a.getContext(‘2d’);
   context.fillText (“This is an example” ,20, 60); 
</script>
<body> 
   <canvas id= “demo”> </canvas>
</body>

  • onload 是一个事件，通常在 <body> 元素中使用，以在网页完全加载所有内容（如脚本文件、图像等）后执行代码。

语法

<element onload = “function()”>

示例

<img src = “example.jpg” onload = “load()” width= “220” height= “300”>
<script>
   function load() {
      alert (“image is being loaded”);
   }
</script>

结论

HTML5 canvas 是一项非常有用的功能，它使开发人员能够创建响应式图像、高速游戏等。它还允许您使用不同的样式效果（如分数字体大小）以不同的形式呈现文本。

更新于: 2022年10月12日

624 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告