Todas as linhas desenhadas pelas instruções de desenho de linha do Canvas HTML5 têm rebarbas (como lineTo, arcTo, strokeRect. Isso ocorre porque a posição correspondente ao valor da coordenada inteira no Canvas é a lacuna entre os pixels da tela, portanto, quando você o faz). pressione assim As coordenadas usadas ao renderizar as linhas são os pixels em ambos os lados da lacuna. Dessa forma, mesmo se lineWidth estiver definido como 1, você verá uma linha com dois efeitos de pixel. +0,5.
A seguir está uma comparação dos efeitos antes e depois do tratamento:
<!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) { //Número de série, contagem este .index = argumentos.callee.prototype.Count = (argumentos.callee.prototype.Count || 0) + 1 var cvs = document.createElement(canvas.id = myCanvas + this.index; largura).appendChild(cvs); A estrutura /Excanvas inicializa manualmente o objeto if (typeof G_vmlCanvasManager! = indefinido) para resolver o problema de atraso de carregamento da tela do IE G_vmlCanvasManager.initElement(cvs); //Objeto de tela 2D this.ctx = cvs.getContext(2d); /* * Desenhar linhas* @ops Objeto JSON, que pode ser estendido de acordo com os atributos reais suportados, exemplo: { 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(); [att] = ops[att]; dotXY = dotXY.constructor == Objeto [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, estiloAVC:'rgb(0,0,0)'}); //Linha comum 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> ↓ Processado ↓ Comum ↓ +0,5 deslocamento<br /> </body> </html>O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.