context.beginPath(); context.moveTo( 100, 100 ); context.lineTo( 400, 100 ); context.closePath(); context.stroke(); context.beginPath(); context.strokeStyle = red  context.moveTo( 100.5, 200.5 ); context.lineTo( 400.5, 200.5 ); context.closePath(); context.stroke();

上述代碼中，context是canvas的上下文，在這段代碼中，我畫了2條線，上面那條線并不是1px，下面的那條線才是1px

上面你可能還看不清楚，那條黑線到底是不是1px，你可以把他們放到html' target='_blank'>畫圖軟件或者photoshop中，放大，然后打開坐標，就能看到如下效果：

很明顯，這條黑線，占據的是2行，就是2px大小，而紅線占據了一行，才是真正的1px的線段，也就是說，在canvas中，你如果需要繪制一條1px的線段，那么坐標后面要加上0.5，那么，接下來，我們就來繪制一個坐標系，x，y方向的坐標系刻度為10px.

drawGrid( #09f , 10, 10); function drawGrid(color, stepx, stepy) { context.save() context.strokeStyle = color; context.lineWidth = 0.5; context.clearRect(0, 0, context.canvas.width, context.canvas.height); for (var i = stepx + 0.5; i context.canvas.width; i += stepx) { context.beginPath(); context.moveTo(i, 0); context.lineTo(i, context.canvas.height); context.stroke(); for (var i = stepy + 0.5; i context.canvas.height; i += stepy) { context.beginPath(); context.moveTo(0, i); context.lineTo(context.canvas.width, i); context.stroke(); context.restore(); }

以上就是html5 1px問題以及繪制坐標系網格的方法的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。