All the lines drawn by the line drawing instructions of Html5 Canvas have burrs (such as lineTo, arcTo, strokeRect). This is because the position corresponding to the integer coordinate value in Canvas happens to be the gap between the screen pixels, so when you press like this The coordinates used when rendering lines are the pixels on both sides of the gap. In this way, even if lineWidth is set to 1, you will see a line with two pixel effects. The solution is to offset the original pixel by +0.5.
The following is a comparison of the effects before and after treatment:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8> <title>canvasTest</title> <script type=text/javascript src=http://www.pyzy.net/Demo/html5_cancas_js/excanvas.js></script> <script type=text/javascript> var MyCanvas = function(boxObj, width, height) { //Serial number, count this .index = arguments.callee.prototype.Count = (arguments.callee.prototype.Count || 0) + 1; var cvs = document.createElement(canvas); cvs.id = myCanvas + this.index; cvs.width = width || 800; cvs.height = height || 600; (boxObj || document.body).appendChild(cvs); / /Excanvas framework manually initializes the object if (typeof G_vmlCanvasManager != undefined) to solve the IE loading canvas delay problem G_vmlCanvasManager.initElement(cvs); //2D canvas object this.ctx = cvs.getContext(2d); /* * Draw lines* @ops JSON object, which can be extended according to the actual supported attributes, example: { lineWidth:1,strokeStyle: 'rgb(255,255,255)' } * @dotXY:{ x:0, y:0 } ||[{ x:0, y:0 },{ x:0, y:0 }] */ this.drawLine = function(dotXY, ops) { this.ctx.beginPath(); for (var att in ops) this.ctx [att] = ops[att]; dotXY = dotXY.constructor == Object ? [dotXY || { x: 0, y: 0}] : dotXY; this.ctx.moveTo(dotXY[0].x, dotXY[0].y); for (var i = 1, len = dotXY.length; i < len; i++) this.ctx.lineTo(dotXY[ i].x, dotXY[i].y); this.ctx.stroke(); }; }; window.onload=function(){ var c1 = new MyCanvas(); c1.drawLine([{ x: 10, y: 10 }, { x: 10, y: 200 }],{lineWidth:2,strokeStyle:'rgb(0,0,0)'} ); c1.drawLine([{ x: 11, y: 10 }, { x: 11, y: 200 }],{lineWidth:2,strokeStyle:'rgb(255,255,255)'}); c1.drawLine([{ x: 100, y: 10 }, { x: 100, y: 200 }],{lineWidth:1, strokeStyle:'rgb(0,0,0)'}); //Ordinary line c1.drawLine([{ x: 200.5, y: 10 }, { x: 200.5, y: 200 }],{lineWidth:1,strokeStyle:'rgb(0,0,0)'}); //+0.5 offset} </script> </head> <body> ↓ Processed ↓ Ordinary ↓ +0.5 offset<br /> </body> </html>The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.