Question

你能告诉我画布上的文字有什么问题吗？我尝试改变文本大小如果我把它做得更大它看起来很好但是如果我把它变小它看起来很奇怪。我不确定究竟是什么影响了文字;我尝试使用font属性但没有结果，每当我使字体变小时，我得到的结果就像在下面的代码片段中一样这是我的代码

(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>

Answer 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>

我会把它留给你来定位文本和诸如此类的东西，但你可以在这个例子中看到你可以根据需要使文本变小或变大。

然而

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

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

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

我强烈建议您阅读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>

在画布元素中绘制文本

1 个答案: