在 HTML5 canvas 中提高平局

Question

今天我开始学习如何使用 canvas 制作基本的加载圆圈动画。在小分辨率（约 100×100 像素）下，一切都完美无缺，但当我尝试更大的分辨率时，一切都变得扭曲和模糊，看起来非常糟糕。所以这是我的问题：我可以以某种方式打开一些抗锯齿功能或以某种方式使其更锐利吗？我已经找到了很多锐化算法，但对于图像，我不确定它是否适用于此。

循环加载示例：（代码并不完美甚至没有完成，因为我仍然卡在那个模糊的地方）

JSFiddle

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var int_count = 0;
var circ_angle = 1.5;
var count = 10;

var interval = setInterval(function() {

  if (int_count == count) {
    clearInterval(interval);
  }
  ctx.clearRect(0, 0, 1000, 1000);

  ctx.beginPath();

  ctx.arc(100, 70, 50, 1.5 * Math.PI, -1 * Math.PI, true);
  ctx.lineWidth = 1;
  ctx.strokeStyle = "#717171";
  ctx.stroke();

  ctx.beginPath();

  //1.5 = 0%; 1 = 1/4; 0.5 = 2/4; 0 = 3/4 -1 = full
  ctx.font = "40px sarpanch";
  ctx.arc(100, 70, 50, 1.5 * Math.PI, circ_angle * Math.PI, true);
  //color
  if (int_count >= 5 && int_count < 10) {
    ctx.strokeStyle = "#ff8000";
  }
  else if (int_count >= 9) {
    ctx.strokeStyle = "#F00";
  }
  else {
    ctx.strokeStyle = "#3a9fbe";
  }

  ctx.fillText("" + int_count + "", 88, 83);

  ctx.lineWidth = 3;
  ctx.stroke();

  int_count += 1;
  circ_angle += (-0.2);
}, 500);

Answer 1

添加以下属性：

width="759" height="394"

到您的 <canvas> 而不是在您的 css

中指定它们

Answer 2

切勿使用 CSS 调整 canvas 的大小。相反，使用 width 和 height 属性设置 canvas 大小：

<canvas id="canvas" width="759" height="394"></canvas>

删除 canvas 的 CSS 规则。

接下来，您必须使用 JavaScript 缩放每个部分：

Working demo

// …
ctx.arc(150, 150, 100, 1.5*Math.PI,-1*Math.PI,true); // instead of 100, 70, 50

// …
ctx.font = "60px sarpanch"; // instead of 40px
ctx.arc(150, 150, 100, 1.5*Math.PI,circ_angle*Math.PI,true); // instead of 100, 70, 50

// …
ctx.fillText(int_count, 130, 170); // instead of 88, 83
// …

在 HTML5 canvas 中提高平局

Sharpen the draw in an HTML5 canvas

html

javascript

css

html5-canvas