画布圆看起来模糊 [英] Canvas circle looks blurry

问题描述

这是对一些过时或不同问题的更新，例如:

•   var c = document.getElementById("canvas");var ctx = c.getContext("2d");ctx.strokeStyle =红色"ctx.beginPath();ctx.moveTo(50,50);ctx.lineWidth = 10;ctx.lineTo(50,100);ctx.stroke();ctx.beginPath();ctx.arc(50，100，0.001，0，2 * Math.PI，false);ctx.lineWidth = 10;ctx.strokeStyle =绿色"ctx.stroke();  

   < div style ="position:绝对；左边距:25％；显示:表格； align-self:居中；宽度:100％;>< canvas id ="canvas"></canvas></div>  

  到目前为止，我找不到有效的答案.但是，如果有人可以解决我的问题，我将非常高兴.提前致谢.

  解决方案

  您的iPhone与您的iPhone没有相同的设备像素比率.画布将无法以与显示时相同的分辨率进行渲染，然后会显得模糊.

  您必须为画布设置css大小，然后将此大小乘以 window.devicePixelRatio 作为画布的大小.最后，通过系数 window.devicePixelRatio 缩放画布坐标系，以得到完美的像素渲染.

  (本文有助于进一步说明 https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio )

  画布在视网膜屏幕上显得太模糊.用window.devicePixelRatio确定多少额外的像素密度应该添加以使图像更清晰.

    var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');//设置显示尺寸(css像素).var size = 200;canvas.style.width = size +"px";canvas.style.height = size +"px";//设置内存中的实际大小(缩放以考虑额外的像素密度).var scale = window.devicePixelRatio;//< ---在视网膜屏幕上更改为1以查看模糊的画布.canvas.width =大小*比例;canvas.height =大小*比例;//标准化坐标系以使用css像素.ctx.scale(scale，scale); 

  This is an update to some outdated or different questions like:

  • Canvas drawings, like lines, are blurry

  • How do I fix blurry shape edges in HTML5 canvas?

  I'd like to draw a line and at the end of this line there should some kind of a circle to generate a rounded line.

  Because the round-lineend should be just at one side of the line I didn't use the line-cap property.

  Using this code below on my computer works fine but testing this code with my iPhone... The line looks -lets say OK- to tbh the circle looks just like crap: Super blurry!

  var c=document.getElementById("canvas");
  var ctx=c.getContext("2d");
  
  ctx.strokeStyle = "red"
  ctx.beginPath();
  ctx.moveTo(50,50);
  ctx.lineWidth = 10;
  ctx.lineTo(50,100);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(50, 100, 0.001, 0, 2 * Math.PI, false);
  ctx.lineWidth = 10;
  ctx.strokeStyle = "green"
  ctx.stroke();

  <div style="position: absolute; margin-left: 25%;display: table; align-self: center; width: 100%;">
      <canvas id="canvas"></canvas>
  </div>

  I couldn't find an working answer so far. But I would be super happy if somebody could fix my problem. Thanks in advance.

  解决方案

  Your iPhone does not have the same device pixel ratio as your PC. The canvas will not render at the same resolution as it is displayed, and then can appear blurry.

  You have to set a css size to your canvas, then, set this size times window.devicePixelRatio as the size of the canvas. Finally scale your canvas coordinate system by a factor window.devicePixelRatio to have a pixel perfect rendering.

  (this article can help for further explanation https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio)

  A canvas can appear too blurry on retina screens. Use window.devicePixelRatio to determine how much extra pixel density should be added to allow for a sharper image.

  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  
  // Set display size (css pixels).
  var size = 200;
  canvas.style.width = size + "px";
  canvas.style.height = size + "px";
  
  // Set actual size in memory (scaled to account for extra pixel density).
  var scale = window.devicePixelRatio; // <--- Change to 1 on retina screens to see blurry canvas.
  canvas.width = size * scale;
  canvas.height = size * scale;
  
  // Normalize coordinate system to use css pixels.
  ctx.scale(scale, scale);
  

  这篇关于画布圆看起来模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！