window.onload=function(){
var c = document.getElementById('canvas'),
ctx = c.getContext('2d'),
x=0, y=0, cnt=1;
for(var i=0;i<(window.innerWidth)/10;i++){
ctx.moveTo(x, y); x+=5;
if(cnt%2){
y=5; cnt++;
ctx.lineTo(x, y);ctx.stroke();
}else{
y=0; cnt++;
ctx.lineTo(x, y);ctx.stroke();
}
}
}
&#13;
<canvas id="canvas" style="width:100%; height:250px"></canvas>
&#13;
如果你运行上面的代码然后在Zig-zag模式中的行的分辨率如果正常但在这里你可以看到图像这个模式的resoultion非常差(请点击此图片查看这个问题):
我试过的是我已将条件(window.innerWidth)/10
更改为(winodw.innerWidth)/4
而x+=5
更改为x+=2
但它的作用是它使得线条如此厚实和糟糕,以至于你不想看到它。
那么,我应该怎样做才能提高模式线条的分辨率?
答案 0 :(得分:2)
有几件事情,但主要归结为:你的宽度为100%
,拉伸您正在绘制的画布的默认大小在 - 这就是为什么它模糊。使用javascript正确设置宽度,锐度增加。唯一的问题是,5像素的差异几乎不可察觉,因此您必须将您的尺寸增加到更多......平均值。我选择了1/100的窗口宽度,但你可以把它变成任何东西。
// For safety, use event listeners and not global window method overwriting.
// It will become useful if you have multiple scripts you want to
// execute only after loading them!
window.addEventListener('DOMContentLoaded', function(){
var c = document.getElementById('canvas'),
ctx = c.getContext('2d'),
x = 0, y = 0;
// Set the correct width and height
c.width = window.innerWidth;
c.height = window.innerWidth / 100;
// Use moveTo once, then keep drawing from your previous lineTo call
ctx.moveTo(x, y);
// You only need your x value here, once we are off screen we can stop drawing and end the for loop!
for(; x < window.innerWidth; x += window.innerWidth / 100){
// Use lineTo to create a path in memory
// You can also see if your y needs to change because y = 0 = falsy
ctx.lineTo(x, (y = y ? 0 : window.innerWidth / 100));
}
// Call stroke() only once!
ctx.stroke();
// And for safety, call closePath() as stroke does not close it.
ctx.closePath();
}, false);
&#13;
<canvas id="canvas"></canvas>
<!-- Remove all styling from the canvas! Do this computationally -->
&#13;
答案 1 :(得分:2)
只需确保您的canvas元素与显示它一样大。 我添加了c.width = windows.innerWidth和c.heigth = 250,现在分辨率看起来正确。
window.onload=function(){
var c = document.getElementById('canvas'),
ctx = c.getContext('2d'),
x=0, y=0, cnt=1;
c.width = window.innerWidth;
c.height = 250;
for(var i=0;i<(window.innerWidth);i++){
ctx.moveTo(x, y); x+=5;
if(cnt%2){
y=5; cnt++;
ctx.lineTo(x, y);ctx.stroke();
}else{
y=0; cnt++;
ctx.lineTo(x, y);ctx.stroke();
}
}
}
&#13;
<canvas id="canvas" style="width:100%; height:250px"></canvas>
&#13;
答案 2 :(得分:-1)
也许你可以在这里找到你的答案
基本上它总结了不是在css中设置高度和宽度,而是应该通过html(在canvas元素中通过width和height attr)或通过javaScript设置它。
因为在css中执行此操作时,基本上是缩放它并因此降低分辨率,因此您必须在html元素中提及实际大小而不是在css中缩放它。