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

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();
    }

效果如下：

这是为什么。。。

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

谢谢

改了 颜色没有改变。:(

画布没有设置宽高属性？

有的
```html



```

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

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

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

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

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

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

你的线太细了。

canvas 画线，坐标是线的 [中心点] 的位置
假设线宽 1px。按楼主的坐标，画出来的线 y 轴顶部是 10 - (1 / 2) = 9.5，底部是 10 - (1 / 2) = 10.5，没有对齐像素点。所以会显得模糊，不够黑
```
ctx.moveTo(10, 9.5);
ctx.lineTo(110, 9.5);
```
改成这样线条应该就清晰了

谢谢大佬们 我还试了一个 这样也会变深色。。
```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();
```

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

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

因为抗锯齿？