帆布笔画()在铬版44中似乎坏了参见测试:https://jsfiddle.net/n9ds4q8m/点击测试按钮在FF/IE中工作得很好,甚至边缘。网格不显示在Chrome,但过去?
var canvas = document.getElementById("drawing");
// if the canvas element exists
if (canvas != null) {
var ctx = canvas.getContext("2d");
ctx.setLineDash([null]);
ctx.lineWidth = 0.5;
ctx.strokeStyle = "#eeeeee";
// horizontal grid lines
for (var i = 0; i <= canvas.height; i = i + 10) {
ctx.beginPath();
ctx.moveTo(0, i);
ctx.lineTo(canvas.width, i);
if (i % parseInt(50) == 0) {
ctx.lineWidth = 2;
} else {
ctx.lineWidth = 0.5;
}
ctx.closePath();
ctx.stroke();
}
// vertical grid lines
for (var j = 0; j <= canvas.width; j = j + 10) {
ctx.beginPath();
ctx.moveTo(j, 0);
ctx.lineTo(j, canvas.height);
if (j % parseInt(50) == 0) {
ctx.lineWidth = 2;
} else {
ctx.lineWidth = 0.5;
}
ctx.closePath();
ctx.stroke();
}
}
}
HTML:<body> <form id="form1" runat="server"> <div><input type="button" onclick="draw()" value="test" /> <canvas id="drawing" width="800" height="550" style="position: relative; cursor: crosshair; border: 1px solid #000; z-index: 10; -ms-touch-action: none; touch-action: none;"></canvas> </div> </form> </body>
发布于 2015-08-04 15:34:50
很高兴你注意到了这一点。几天前我就注意到了,但直到今天我才真正开始调查。我把问题收窄了。它不喜欢ctx.setLineDash([null]);
部分。在我的代码中,我使用的是ctx.setLineDash([0,0]);
,它也不喜欢这样。
经过进一步的调查,0,0似乎没有任何意义,尽管Firefox允许这样做。此外,null不符合规范。因此,制作实线的最佳方法是ctx.setLineDash([]);
https://stackoverflow.com/questions/31820358
复制