Todas las líneas dibujadas por las instrucciones de dibujo lineal de Html5 Canvas tienen rebabas (como lineTo, arcTo, StrokeRect). Esto se debe a que la posición correspondiente al valor de coordenada entera en Canvas resulta ser el espacio entre los píxeles de la pantalla, por lo que cuando usted. presione así Las coordenadas utilizadas al representar líneas son los píxeles en ambos lados del espacio. De esta manera, incluso si lineWidth se establece en 1, verá una línea con dos efectos de píxeles. La solución es compensar el píxel original. +0,5.
La siguiente es una comparación de los efectos antes y después del tratamiento:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//ES http://www.w3.org/TR/html4/strict.dtd> <html> <head> <meta http-equiv=Content-Type contenido=texto/html; conjunto de caracteres=utf-8> <título>prueba de lienzo</título> <tipo de script=texto/javascript src=http://www.pyzy.net/Demo/html5_cancas_js/excanvas.js></script> <script type=text/javascript> var MyCanvas = function(boxObj, ancho, alto) { //Número de serie, recuento este .index = argumentos.callee.prototype.Count = (argumentos.callee.prototype.Count || 0) + 1 var cvs =; document.createElement(canvas); cvs.id = myCanvas + this.index; cvs.width = ancho || cvs.height = altura || /El marco Excanvas inicializa manualmente el objeto si (tipo de G_vmlCanvasManager! = indefinido) para resolver el problema de retraso en la carga del lienzo de IE G_vmlCanvasManager.initElement(cvs); // Objeto de lienzo 2D this.ctx = cvs.getContext(2d); /* * Dibujar líneas* @ops Objeto JSON, que se puede ampliar de acuerdo con los atributos reales admitidos, ejemplo: { 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 en ops) this.ctx [att] = operaciones[att]; puntoXY = puntoXY.constructor == Objeto [puntoXY || dotXY; this.ctx.moveTo(dotXY[0].x, dotXY[0].y para (var i = 1, len = dotXY.length; i < len; i++) this.ctx.lineTo(dotXY[ i].x, dotXY[i].y); this.ctx.stroke(); }; = nuevo MiCanvas(); 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, estilotrazo:'rgb(0,0,0)'}); // Línea ordinaria c1.drawLine([{ x: 200.5, y: 10 }, { x: 200.5, y: 200 }],{lineWidth:1,strokeStyle:'rgb(0,0,0)'}); //+0,5 desplazamiento} </script> </head> <body> ↓ Procesado ↓ Ordinario ↓ +0,5 de desplazamiento<br /> </body> </html>Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.