[英]Sharpen the draw in an HTML5 canvas
Today I started learning how to work with canvas by doing a basic loading circle animation. 今天,我开始通过做一个基本的加载圆环动画来学习如何使用画布。 Everything works perfect in small res (ca. 100×100 px) but when I tried much larger it all went distorted and blurred and it looks really bad.
一切都可以在较小的分辨率(约100×100像素)下完美显示,但是当我尝试更大的分辨率时,一切都变得失真和模糊,看起来真的很糟糕。 So this is my question: Can I somehow turn on some anti-aliasing on or somehow make it more sharpen?
所以这是我的问题:我可以以某种方式打开某些抗锯齿功能还是以某种方式使其更加清晰? I already found plenty of sharpening algorithms but for images and I'm not sure if it will work with this.
我已经找到了很多锐化算法,但是对于图像,我不确定是否可以使用。
Circle loading example: (code is not perfect or even finished because I'm still stuck on that blur) 循环加载示例:(代码不是完美的,甚至还没有完成,因为我仍然停留在模糊中)
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);
Add the following attributes : 添加以下属性:
width="759" height="394"
to your <canvas>
instead of specifying them in your css 到您的
<canvas>
而不是在CSS中指定它们
Never resize your canvas with CSS. 切勿使用CSS调整画布的大小。 Instead, set the canvas size with the
width
and height
attributes: 而是使用
width
和height
属性设置画布大小:
<canvas id="canvas" width="759" height="394"></canvas>
Remove the CSS rules for the canvas. 删除画布的CSS规则。
Next, you'll have to scale every part with JavaScript: 接下来,您必须使用JavaScript缩放每个部分:
// …
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
// …
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.