Home >Web Front-end >H5 Tutorial >HTML5 Canvas implements drawing a pixel-wide thin line
Draw a pixel-wide thin line. When using HTML5 Canvas to implement it, pay special attention to ensure that all your coordinate points are integers. Otherwise, HTML5 will automatically implement edge anti-aliasing. Interested friends can take a look at the rendering
The following code in the orthodox HTML5 Canvas
ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ctx.stroke();
The running result is not a line with a width of one pixel
It feels so thick, like often seen The various drawing line effects of the web version are very different. Could it be that HTML5 Canvas didn't expect to do it better?
In fact, the fundamental reason is that the drawing of Canvas does not start from the middle
It is drawn from 0 to 1 instead of from 0.5 to 1 0 to 0.5, so
causes the fade to be at the edge and the line looks very wide.
There are two solutions, one is the dislocation coverage method, and the other is the center
translation (0.5,0.5). The implementation code is as follows:
Dislocation coverage method I have packaged it into a function of the original context
/** * <p> draw one pixel line </p> * @param fromX * @param formY * @param toX * @param toY * @param backgroundColor - default is white * @param vertical - boolean */ CanvasRenderingContext2D.prototype.onePixelLineTo = function(fromX, fromY, toX, toY, backgroundColor, vertical) { var currentStrokeStyle = this.strokeStyle; this.beginPath(); this.moveTo(fromX, fromY); this.lineTo(toX, toY); this.closePath(); this.lineWidth=2; this.stroke(); this.beginPath(); if(vertical) { this.moveTo(fromX+1, fromY); this.lineTo(toX+1, toY); } else { this.moveTo(fromX, fromY+1); this.lineTo(toX, toY+1); } this.closePath(); this.lineWidth=2; this.strokeStyle=backgroundColor; this.stroke(); this.strokeStyle = currentStrokeStyle; };
ctx.save(); ctx.translate(0.5,0.5); ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ctx.stroke(); ctx.restore();
, which will cause your one pixel straight line to look thicker.
Running effect:
How is the effect now? This is a little trick for HTML5 Canvas line drawing.
If you think it is good, please give it a thumbs up.
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
html5 Canvas implementation of drawing unclosed paths and gradient color filling methodshtml5 Canvas implementation Draw straight lines and set line stylesThe above is the detailed content of HTML5 Canvas implements drawing a pixel-wide thin line. For more information, please follow other related articles on the PHP Chinese website!