HTML5 Canvas 破损 Chrome 44.0.2403.125 m

Question

Canvas stroke() 似乎在 chrome 版本 44 中被破坏查看测试：https://jsfiddle.net/n9ds4q8m/ 点击测试按钮在 FF/IE 甚至 Edge 中也能正常工作。网格在 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>

Answer 1

很高兴您注意到这一点。几天前我有点注意到这一点，但直到今天才开始真正调查它。我已经缩小了问题的范围。它不喜欢 ctx.setLineDash([null]); 部分。在我的代码中，我正在使用 ctx.setLineDash([0,0]); 而且它也不喜欢那样。

经过更多调查，[0,0] 似乎没有任何意义，尽管 Firefox 允许这样做。此外，[null] 不符合规范。所以制作实线的最好方法是 ctx.setLineDash([]);

HTML5 Canvas 破损 Chrome 44.0.2403.125 m

HTML5 Canvas broken in Chrome 44.0.2403.125 m

google-chrome

html5-canvas