canvas 画线为什么颜色不对

[Dustyposa]

大佬们 问一下 为什么画出来不是黑色

window.onload = function () {
        // var lineJoin = ['round', 'bevel', 'miter'];
        var canvas = document.getElementById("canvas");
        let ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.fillStyle = 'black';
        ctx.moveTo(10, 10);
        ctx.lineTo(110, 10);
        ctx.stroke();
    }

效果如下图：

多次 stroke 才变黑。。。

window.onload = function () {
        // var lineJoin = ['round', 'bevel', 'miter'];
        var canvas = document.getElementById("canvas");
        let ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.fillStyle = 'black';
        ctx.moveTo(10, 10);
        ctx.lineTo(110, 10);
        ctx.stroke();
        ctx.stroke();
        ctx.stroke();
        ctx.stroke();
    }

效果如下：

这是为什么。。。

[WishingFu]

因为 fill 和 stroke 是两个样式，改 strokeStyle 而不是 fillStyle。

[Dustyposa]

谢谢
@WishingFu
改了 颜色没有改变。:(

[ztmqg]

画布没有设置宽高属性？

[Dustyposa]

@ztmqg 有的
```html
<canvas width="600" height="600" id="canvas">


</canvas>
```

[WishingFu]

@Dustyposa 这。。你用的什么电脑，可能需要处理 devicePixelRatio，然后 canvas 画布大小和元素大小好像也有影响（忘了。。。）

[Dustyposa]

@emm 公司的辣鸡电脑 我回去试试。。主要感觉 canvas 很奇怪。 斜着画颜色最深，竖着其次，横着最前。

[zarte]

浏览器问题吧，你这都有减变的感觉了

[ifreego]

只画线的话可以加个 ctx.translate(0.5, 0.5)，也可以设置 devicePixelRatio。可以看下这个 https://segmentfault.com/a/1190000004505090

[stillsilly]

我对 canvas 一无所知，
复制粘贴你的代码，分别把 ctx.fillStyle = 'black';改成"red","#ff0000"，以及把这句话注释掉，这条线的颜色一点都没变。很明显，控制线条颜色不是用 fillStyle 这个属性。
然后我上网搜了一下，改线条颜色应该用 strokeStyle。
设置 ctx.strokeStyle = 'black'和 ctx.strokeStyle = '#000'，确实不是纯黑，用工具看 实际显示颜色大概是#7f7f7f
担心这个黑色这个颜色可能比较特别？ 换了#ff0000 试试，也不是很红，实际显示是#ff8080
然后我怀疑可能是线条太细了，分别设置 ctx.lineWidth = 20;和 ctx.lineWidth = 2;，颜色很正
然后上网搜索“canvas 1px 线条 颜色浅”，出来一堆解决方案
授人以鱼不如授人以渔，我的调试过程供参考：）

[stillsilly]

其实我看到问题后的第一步是搜“canvas 线条 颜色浅”，最近梯子挂了，只能用百度，第一页没找到相关内容
谷歌肯定有，由此可见有个稳定的梯子能大幅提高工作效率

[whileFalse]

你的线太细了。

[mongkii]

canvas 画线，坐标是线的 [中心点] 的位置

假设线宽 1px。按楼主的坐标，画出来的线 y 轴顶部是 10 - (1 / 2) = 9.5，底部是 10 - (1 / 2) = 10.5，没有对齐像素点。所以会显得模糊，不够黑

```
ctx.moveTo(10, 9.5);
ctx.lineTo(110, 9.5);
```
改成这样线条应该就清晰了

[Dustyposa]

谢谢大佬们 我还试了一个 这样也会变深色。。
```javascript
// var lineJoin = ['round', 'bevel', 'miter'];
var canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.moveTo(10, 10);
ctx.lineTo(110, 10);
ctx.closePath();
ctx.stroke();
```

[Dustyposa]

但是多次 stroke 就变深了，我觉得一开始就应该可以变深的感觉。。

[across]

https://www.w3school.com.cn/tags/canvas_fillstyle.asp
隐约记得在哪里画过，webgl 练习还是啥的。
你难道不是渐变属性设置问题？

[mxalbert1996]

因为抗锯齿？

[lFork]

@mxalbert1996 Android 里面就是，如果线条是 1px 的话，开了抗锯齿，颜色就会不对。