相关疑难解决方法(0)

我正在玩<canvas>元素,绘制线条等.

我注意到我的对角线是抗锯齿的.我更喜欢看到我正在做的事情 - 有什么方法可以关闭这个功能吗？

当我将775 x 775图像添加到fabricjs画布并将其调整为大约90 x 90时,图像会大大降低其质量.

但是如果我将相同的图像添加到一个<img/>并将其缩小,它就会保留其质量.

为什么画布图像质量如此之低？如何使画布图像保持原始质量<img/>？

我看过这里的问题并按照答案但我的画布仍然是低分辨率:

CSS:

#canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

JS:初始化画布(在页面加载时调用一次,在窗口调整大小时调用)

function initCanvas() {
    $('#canvas').width($(window).width());
    $('#canvas').height($(window).height());
}

绘图线

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

结果

的jsfiddle

您可以看到该行显示为低分辨率.我想要一个全窗口但看起来很清晰的画布.

注意:我使用绝对位置和z-index -1作为画布,因为我希望它出现在我稍后在页面上添加的任何其他内容之后.

我使用该Cesium Earth库开发了一个应用程序.

问题是,绘制的线(实体路径)具有非常低的质量,它不是平滑的.如何让它变得更好？

  viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: false,
    shadows:true,
    skyAtmosphere: false,
    geocoder: false,
    shouldAnimate:true,
    clockViewModel: new Cesium.ClockViewModel(clock),
    imageryProviderViewModels: imageryViewModels,
    requestRenderMode : true
  });

entity[i] = viewer.entities.add({              
            path:{
               leadTime:leadTime,
               trailTime:trailTime,
               width:1.5,
               material: color,
               resolution:10
            }
});

satellite[id].position.setInterpolationOptions({
         interpolationDegree : 10,
         interpolationAlgorithm : Cesium.HermitePolynomialApproximation 
});

问题是描边不透明度低于填充不透明度，并且我无法使描边颜色与填充颜色具有相同的不透明度。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "rgba(255,0,0,1)";
ctx.fillStyle = "rgba(255,0,0,1)";
ctx.strokeRect(20, 20, 25, 25);
ctx.fillRect(20, 50, 25, 25);

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>

如果我们将 fillStyle 不透明度设置为 0.5，那么它们将是相同的，但我们不能提高描边的不透明度。

那么如何设置描边颜色与填充颜色相同呢？