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或使用csswidth和height值（即element.style.width和element.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 回答