Question

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

我想画一条线，在这条线的末尾应该有一种圆形来生成一条圆形线。

因为圆线端应该只在线的一侧，所以我没有使用线帽属性。

在我的计算机上使用下面的代码可以正常工作但是用我的iPhone测试这段代码...这条线看起来很好 - 这个圆圈看起来就像废话一样：Super blurry!

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

画布圈看起来很模糊

2 个答案: