4

我想知道为什么我的画布元素的边缘/线条是模糊的(Chrome、IE、FF)并具有所谓的“锯齿效应”(这个表达式是否存在于英语中?:-)),如您在此处看到的: 在此处输入图像描述

这只是一个快速的第一次尝试 - 也许我做错了什么?这是代码:

c2 = document.getElementById('test').getContext('2d');
c2.fillStyle = '#f00';
c2.beginPath();
c2.moveTo(0, 0);
c2.lineTo(100, 0);
c2.lineTo(80, 50);
c2.lineTo(0, 50);
c2.closePath();
c2.fill();

c2.fillStyle = "#000";
c2.beginPath();
c2.moveTo(0, 50);
c2.lineTo(80, 50);
c2.lineTo(60, 100);
c2.lineTo(0, 100);
c2.closePath();
c2.fill();

我还将它添加到这个JS Fiddle

4

2 回答 2

6

画布对象有两种“尺寸”:一种是屏幕上的尺寸,另一种是支持画布的位图尺寸。

您可以使用offsetWidth/offsetHeight或使用csswidthheight值(即element.style.widthelement.style.height)访问第一个。相反,第二个大小是在元素本身<canvas width=100 height=200>或设置上指定的element.widthand element.height

如果位图尺寸小于屏幕尺寸,则浏览器将使用双线性插值“放大”位图,从而产生模糊效果。

最好的清晰图形可以通过将屏幕大小设置为等于位图大小,或者仅在使用像视网膜显示器这样的坏技巧的设备上,通过将位图大小设置为屏幕大小的两倍(这是必要的,因为屏幕像素大小在这些设备中是伪造的)。

相反,如果您所描述的“模糊”只是抗锯齿,那么我很抱歉,但是在画布上绘图时没有可移植的方法来禁用抗锯齿,除了通过访问像素数据数组使用 javascript 自己绘制像素之外。

具有适当位图大小的画布以最佳方式呈现,就像 svg“矢量图形”一样。以下是两条线的屏幕截图的放大视图,一条绘制在画布上,另一条绘制在 svg 上,显然无法说出哪条是哪条。

在此处输入图像描述

于 2014-03-14T22:50:47.333 回答
3

您可以对画布进行过采样(假双分辨率):

这是一个顶部为标准分辨率,底部为“双”分辨率的插图:

演示:http: //jsfiddle.net/m1erickson/M5NHN/

在此处输入图像描述

html:

<canvas id="canvas1" width=300 height=150></canvas>
<canvas id="canvas2" width=600 height=300></canvas>

CSS:

#canvas1 {
    border:1px solid red;
    width:300px;
    height:150px;
}
#canvas2 {
    border:1px solid green;
    width:300px;
    height:150px;
}

JS:

var canvas = document.getElementById("canvas1");
var context1 = canvas.getContext("2d");
var canvas = document.getElementById("canvas2");
var context2 = canvas.getContext("2d");

draw(context1);

context2.scale(2, 2);
draw(context2);

function draw(c2){

c2.fillStyle = '#f00';
c2.beginPath();
c2.moveTo(0, 0);
c2.lineTo(100, 0);
c2.lineTo(80, 50);
c2.lineTo(0, 50);
c2.closePath();
c2.fill();

c2.fillStyle = "#000";
c2.beginPath();
c2.moveTo(0, 50);
c2.lineTo(80, 50);
c2.lineTo(60, 100);
c2.lineTo(0, 100);
c2.closePath();
c2.fill();
}
于 2014-03-14T22:43:22.587 回答