在画布元素中绘制文本答案

【问题标题】：Drawing text in canvas element在画布元素中绘制文本
【发布时间】：2017-11-17 02:02:39
【问题描述】：

你能告诉我画布上的文字有什么问题吗？我试图改变文本大小，如果我把它变大它看起来不错，但如果我把它变小它看起来很奇怪。我不确定究竟是什么影响了文本；我尝试使用字体属性但没有结果，每当我将字体变小时，我都会得到类似于下面 sn-p 的结果这是我的代码

(function(){
    function init(){
        var canvas = document.getElementsByTagName('canvas')[0];
        var c = canvas.getContext('2d');
        var animationStartTime =0;
        c.fillStyle = 'white';
        c.font = 'normal 10pt';
        var textarray = 'you can live a beatiful life with a postive mind';
       
        var j=1;
        //time - next repaint time - HRT
        function draw(time){
        
            c.fillText(textarray.substr(0,j),10,70);
            if(time - animationStartTime > 100){
                animationStartTime = time;
                j++;
            }
            if( j <= textarray.length){
            requestAnimationFrame(draw);   // 17ms
            }
          }
        function start(){
            animationStartTime = window.performance.now();
            requestAnimationFrame(draw);
        }

        start();
    }
//invoke function init once document is fully loaded
    window.addEventListener('load',init,false);
}()); //self invoking function

#canvas{
  overflow:hidden;
  background-image: url('http://linux2.gps.stthomas.edu/~algh3635/practice/proj/img/img4.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
}
canvas {
  width:100%;
  height:80vh;
  left: 0;
  margin: 0;
  padding: 0;
  position: relative;
  top: 0;	
}

<div id="canvas">
        <div class="row">
          <div class="col-lg-12 text-center" >
						 <canvas > 
						
						</canvas>
          </div>
        </div>			
</div>

【问题讨论】：

标签： javascript html canvas text

【解决方案1】：

当您在画布上填充文本时，它不再是字母，而是开始成为字母形状的像素集合。当你放大它时，像素会变大。这就是画布的工作原理。

如果您希望文本缩放为基于矢量的字体而不是像素，请不要在画布上绘制它们。您可以创建 HTML 元素，并使用 CSS 定位将它们放置在画布顶部。这样，当您放大时，渲染引擎将以更高的分辨率渲染字体，并且它们将保持清晰。但是你在画布上绘制的任何东西都会相应地缩放。

但是对于这个简单的例子，我建议只是在 html、css 和 javascript 中这样做：

var showText = function (target, message, index, interval) {   
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () { showText(target, message, index, interval); }, interval);
  }
}


$(function () {

  showText("#text", "you can live a beatiful life with a postive mind", 0, 100);   

});

#canvas{
  position: relative;
  width: 100%;
  height: 80vh;
  overflow:hidden;
  background-image: url('http://linux2.gps.stthomas.edu/~algh3635/practice/proj/img/img4.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
}

#text {

  position: absolute;
  top: 50%;
  left: 20px;
  color: #fff;
  font-size: 20px;
  
}

<div id="canvas">
  <p id="text"> </p>
</div>

我会让你来决定文本的位置，但你可以在这个例子中看到，你可以根据需要将文本设置得尽可能小。 p>

然而

...如果您仍然绝对需要它作为画布，那么下面的示例可以工作。之所以有效，是因为画布没有被 css 拉伸，宽度和高度是预定义的。

canvas 元素独立于设备或显示器的像素比率运行。

在 iPad 3+ 上，该比率为 2。这实际上意味着您的 1000 像素宽度画布现在需要填充 2000 像素以匹配它在 iPad 显示屏上的规定宽度。对我们来说幸运的是，这是由浏览器自动完成的。另一方面，这也是您在直接适合其可见区域的图像和画布元素上看到较少定义的原因。因为您的画布只知道如何填充 1000 像素，但被要求绘制到 2000 像素，所以浏览器现在必须智能地填充像素之间的空白，以便以适当的大小显示元素。

我强烈建议您阅读来自 HTML5Rocks 的 this 文章，该文章更详细地解释了如何创建高清元素。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "12px Arial";
ctx.fillText("Hello World",10,50);

#canvas{
  position: relative;
  overflow:hidden;
  background-image: url('http://linux2.gps.stthomas.edu/~algh3635/practice/proj/img/img4.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
}

<!DOCTYPE html>
<html>
<body>

<canvas id="canvas" width="800" height="500"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>


</body>
</html>

【讨论】：

它工作正常，但我想要的是使用画布属性来绘制和动画文本。非常感谢
@Ahmed 为什么？任何原因？大多数网络开发人员不使用画布
这只是作业的要求:)
@Ahmed Ah 好吧 :) 好吧，我用应该可以工作的画布解决方案更新了我的答案