我正在使用EaselJS作为HTML5画布的API。
我注意到以下代码:
line.graphics.setStrokeStyle(1).beginStroke("black").moveTo(100,100).lineTo(200,200);
stage.addChild(line);
以下是生成的代码:
我将线条厚度设置为1,但线条仍然模糊。如果你通过快照放大,你会发现它实际上占据了3个像素。我相信我曾在某个地方读到过canvas在两个像素之间绘制一个点,以便实际上两个像素都被着色。并且你需要将绘制点的位置向左或向右移动半个像素宽度,这样它就落在整个像素上。
我需要应用程序的清晰图像,请给予建议。
moveTo(100,100)
更改为moveTo(100.5,100.5)
了吗? - kangaxmoveTo(coerce(100), coerce(100))
或moveTo('100'.toCanvas(), '100'.toCanvas())
— 当然,这两种方法都有点丑陋(而且令人困惑):) 我不熟悉EaselJS,也不知道它是否有任何方法来解决这个问题。我知道在我的库(fabric.js,http://kangax.github.com/fabric.js/demos/kitchensink)中也没有处理这个问题的方法... - kangax