画布圈看起来很模糊答案

【问题标题】：Canvas circle looks blurry画布圈看起来很模糊
【发布时间】：2018-02-24 10:27:51
【问题描述】：

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

我想画一条线，在这条线的末端应该有一个圆来生成圆线。

因为round-lineend 应该就在线条的一侧，所以我没有使用line-cap 属性。

在我的计算机上使用下面的代码可以正常工作，但用我的 iPhone 测试此代码...这条线看起来 - 让我们说 OK - 到 tbh 圆圈看起来就像废话：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>

到目前为止，我找不到有效的答案。但如果有人能解决我的问题，我会非常高兴。提前致谢。

【问题讨论】：

标签： javascript jquery html canvas

【解决方案1】：

您的 iPhone 与您的 PC 的设备像素比不同。画布不会以与显示相同的分辨率渲染，然后会显得模糊。

您必须为您的画布设置一个 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');

// 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);

【讨论】：

【解决方案2】：

这个怎么样？

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.closePath();
ctx.stroke();

ctx.beginPath();
ctx.arc(50, 50, 5, 0, 2 * Math.PI, false);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();

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

【讨论】：

完全不同！