canvas 画线为什么颜色不对

推荐关注

Meteor

JSLint - a Javascript code quality tool

jsFiddle

D3.js

WebStorm

推荐书目

Javascript 权威指南第 5 版

Closure: The Definitive Guide

This topic created in 2267 days ago, the information mentioned may be changed or developed.

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

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

效果如下：

这是为什么。。。

17 replies 2023-05-23 09:28:11 +08:00

WishingFu

Mar 2, 2020

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

Dustyposa

Mar 2, 2020

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

ztmqg

Mar 2, 2020 via Android

画布没有设置宽高属性？

Dustyposa

Mar 2, 2020

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

</canvas>
```

WishingFu

Mar 2, 2020

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

Dustyposa

Mar 2, 2020

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

zarte

Mar 2, 2020

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

ifreego

Mar 2, 2020

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

stillsilly

Mar 2, 2020

我对 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

Mar 2, 2020 via iPhone

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

whileFalse

Mar 2, 2020

你的线太细了。

mongkii

Mar 2, 2020

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

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

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

Dustyposa

Mar 2, 2020

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

Mar 2, 2020

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

across

Mar 3, 2020 via iPhone

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

mxalbert1996

Mar 3, 2020 via Android

因为抗锯齿？

lFork

May 23, 2023

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