Alle mit den Strichzeichnungsanweisungen von Html5 Canvas gezeichneten Linien haben Grate (z. B. lineTo, arcTo, StrokeRect). Dies liegt daran, dass die Position, die dem ganzzahligen Koordinatenwert in Canvas entspricht, zufällig die Lücke zwischen den Bildschirmpixeln ist Drücken Sie wie folgt: Die beim Rendern von Linien verwendeten Koordinaten sind die Pixel auf beiden Seiten der Lücke. Auf diese Weise sehen Sie eine Linie mit zwei Pixeleffekten +0,5.
Nachfolgend ein Vergleich der Wirkungen vor und nach der Behandlung:
<!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) { //Seriennummer, Anzahl this .index = arguments.callee.prototype.Count = (arguments.callee.prototype.Count || 0) + 1; document.createElement(canvas); cvs.width = width || 600; Das /Excanvas-Framework initialisiert das Objekt manuell, wenn (Typ von G_vmlCanvasManager != undefiniert), um das Problem der IE-Lade-Canvas-Verzögerung zu lösen G_vmlCanvasManager.initElement(cvs); //2D-Canvas-Objekt this.ctx = cvs.getContext(2d); /* * Linien zeichnen* @ops JSON-Objekt, das entsprechend den tatsächlich unterstützten Attributen erweitert werden kann, Beispiel: { 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 == Objekt ? [dotXY ||. 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(); }; = 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)'}); //Gewöhnliche Linie 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> ↓ Verarbeitet ↓ Gewöhnlich ↓ +0,5 Offset<br /> </body> </html>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.