Html5 Canvas의 선 그리기 명령으로 그린 모든 선에는 버(lineTo, arcTo, 스트로크Rect 등)가 있습니다. 이는 Canvas의 정수 좌표 값에 해당하는 위치가 우연히 화면 픽셀 사이의 간격이기 때문입니다. 선을 렌더링할 때 사용되는 좌표는 간격의 양쪽 픽셀입니다. 이렇게 하면 lineWidth가 1로 설정되어 있어도 두 가지 픽셀 효과가 있는 선이 표시됩니다. +0.5.
치료 전후의 효과를 비교하면 다음과 같습니다.
<!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) { //일련번호, 개수 this .index = 인수.callee.prototype.Count = (arguments.callee.prototype.Count || 0) + 1; document.createElement(canvas); cvs.id = myCanvas + this.index; cvs.height = 높이 || 600; /Excanvas 프레임워크는 IE 로딩 캔버스 지연 문제를 해결하기 위해 (G_vmlCanvasManager 유형 != 정의되지 않은 경우) 개체를 수동으로 초기화합니다. G_vmlCanvasManager.initElement(cvs); //2D 캔버스 객체 this.ctx = cvs.getContext(2d); /* * 선 그리기* 실제 지원되는 속성에 따라 확장될 수 있는 JSON 객체: { lineWidth: 1,스트로크스타일: '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 == 객체 ? [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); 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,trokStyle:'rgb(255,255,255)'}); c1.drawLine([{ x: 100, y: 10 }, { x: 100, y: 200 }],{lineWidth:1, 스트로크스타일:'rgb(0,0,0)'}); //일반 선 c1.drawLine([{ x: 200.5, y: 10 }, { x: 200.5, y: 200 }],{lineWidth:1,trokStyle:'rgb(0,0,0)'}); //+0.5 오프셋} </script> </head> <body> ↓ 처리됨 ↓ 일반 ↓ +0.5 오프셋<br /> </body> </html>위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.