Toutes les lignes tracées par les instructions de dessin au trait de Html5 Canvas ont des bavures (telles que lineTo, arcTo, StrokeRect). En effet, la position correspondant à la valeur de coordonnée entière dans Canvas se trouve être l'écart entre les pixels de l'écran, donc lorsque vous le faites. appuyez comme ceci Les coordonnées utilisées lors du rendu des lignes sont les pixels des deux côtés de l'espace. De cette façon, même si lineWidth est défini sur 1, vous verrez une ligne avec deux effets de pixels. La solution est de décaler le pixel d'origine de. +0,5.
Ce qui suit est une comparaison des effets avant et après le traitement :
<!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) { //Numéro de série, nombre this .index = arguments.callee.prototype.Count = (arguments.callee.prototype.Count || 0) + 1; document.createElement(canvas); cvs.id = myCanvas + this.index; cvs.width = largeur || 800; cvs.height = hauteur || /Le framework Excanvas initialise manuellement l'objet if (type de G_vmlCanvasManager ! = non défini) pour résoudre le problème de retard du chargement du canevas dans IE G_vmlCanvasManager.initElement(cvs); //Objet canevas 2D this.ctx = cvs.getContext(2d); /* * Tracer des lignes* Objet JSON @ops, qui peut être étendu en fonction des attributs réellement pris en charge, exemple : { 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 == Objet [dotXY || { x : 0, y : 0}] : dotXY; this.ctx.moveTo(dotXY[0].x, dotXY[0].y); pour (var i = 1, len = dotXY.length; i < len; i++) this.ctx.lineTo(dotXY[ je].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)'}); //Ligne ordinaire 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> ↓ Traité ↓ Ordinaire ↓ +0,5 décalage<br /> </body> </html>Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.