100％的宽度和高度的画布质量差

本文介绍了100％的宽度和高度的画布质量差的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我用画布做了一个非常小的例子，它在 JsFiddle 上提供：

 < html> 
< head> 
< title>< / title> 
< style type =text / css> 
 
 html，body {
 width：100％; 
 height：100％; 
 margin：0px; 
 padding：0px; 
} 
 
 #myCanvas {
 width：100％; 
 height：100％; 
 display：block; 
} 
 
< / style> 
< / head> 
< body> 
< canvas id =myCanvas> 
您的浏览器并不支持HTML5 canvas标签。 
< / canvas> 
< script> 
 
 var canvas = document.getElementById（myCanvas）; 
 var context = canvas.getContext（2d）; 
 
 context.id =myContext; 
 context.beginPath（）; 
 context.arc（95，50，40，0，2 * Math.PI）; 
 context.stroke（）; 
 
 setTimeout（function（）{
 var rectWidth = 150; 
 var rectHeight = 75; 
 context.fillStyle =blue; 
 context。 fillRect（rectWidth / -2，rectHeight / -2，rectWidth，rectHeight）; 
}，2000） 
 
< / script> 
< / body> 
< / html>

正如您所看到的，渲染结果质量非常低：

所以，我想知道，如何使用画布绘制各种数字，质量好，我不想画小尺寸，我想画100％

因此，也许我没有定义一些抗锯齿滤波器或其他东西？

感谢！

解决方案

问题

在大多数一般情况下，使用CSS设置画布大小。

画布的默认大小为300 x 150像素（位图）。如果你使用CSS设置大小，我们将最终缩放那些300×150像素，意味着浏览器将开始内插和平滑的图像，这就是为什么你结束了一个模糊的结果。

解决方案

从CSS规则中删除这些：

  #myCanvas {
 / * width：100％; 
 height：100％; * / 
 display：block; 
}

并使用JavaScript设置大小：

  var canvas = document.getElementById（myCanvas）; 
 
 canvas.width = window.innerWidth; // equals window dimension 
 canvas.height = window.innerHeight;

你当然可以设置你需要的任何其他大小如果你的目标是完整的窗口大小，你可能想要定义canvas的CSS位置（即固定或绝对）。

希望这有助于。

I have done a very tiny example with canvas, it's available on JsFiddle:

http://jsfiddle.net/yPtr5/

<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <style type="text/css">

    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #myCanvas {
        width: 100%;
        height: 100%;
        display: block;
    }

    </style>
    </head>
    <body>
        <canvas id="myCanvas">
            Your browser does not support the HTML5 canvas tag.
        </canvas>
        <script>

            var canvas = document.getElementById( "myCanvas" );
            var context = canvas.getContext( "2d" );

            context.id = "myContext";
            context.beginPath();
            context.arc( 95, 50, 40, 0, 2 * Math.PI );
            context.stroke();

            setTimeout( function() {
                var rectWidth = 150;
                var rectHeight = 75;
                context.fillStyle = "blue";
                context.fillRect( rectWidth / -2, rectHeight / -2, rectWidth, rectHeight );
            }, 2000 );

        </script>
    </body>
</html>

As you are able to see, the rendering result has a very low quality:

So, I'm wondering, how can I draw various figures using Canvas in a good quality, I don't want to draw in small size, I want to draw in 100% size of page.

So, maybe I didn't define some anti aliasing filter or something else?

Thanks!

解决方案

Problem

In most general cases we should avoid using CSS to set the canvas size.

The default size of canvas is 300 x 150 pixels (bitmap). If you set the size using CSS we'll just end up scaling those 300 x 150 pixels meaning the browser will start interpolating and smoothing the image, which is why you end up with a blurry result.

Solution

Remove these from the CSS-rule:

#myCanvas {
  /*width: 100%;
  height: 100%;*/
  display: block;
  }

and set the size in JavaScript like this:

var canvas = document.getElementById( "myCanvas" );

canvas.width = window.innerWidth;     // equals window dimension
canvas.height = window.innerHeight;

You can of course set any other size you need (in pixels). You probably want to define position (i.e. fixed or absolute) for the canvas' CSS as well if your goal is full window size.

Hope this helps.

这篇关于100％的宽度和高度的画布质量差的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！