Html5 Canvas の線描画命令で描画した線はすべてバリ(lineTo、arcTo、strokeRect など)があります。これは、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 = argument.callee.prototype.Count = (arguments.callee.prototype.Count || 0) + 1; document.createElement(canvas); cvs.id = myCanvas + this.index; cvs.height = 高さ || /Excanvas フレームワークは、IE の読み込みキャンバスの遅延問題を解決するために、(typeof G_vmlCanvasManager != 未定義) の場合にオブジェクトを手動で初期化します。 G_vmlCanvasManager.initElement(cvs); //2D キャンバス オブジェクト this.ctx = cvs.getContext(2d); /* * 線を描画* @ops 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 || { x: 0, y: 0}] : 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.ストローク() }; = 新しい MyCanvas(); c1.drawLine([{ x: 10, y: 10 }, { x: 10, y: 200 }],{lineWidth:2,ストロークスタイル:'rgb(0,0,0)'} ); c1.drawLine([{ x: 11, y: 10 }, { x: 11, y: 200 }],{lineWidth:2,ストロークスタイル:'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,ストロークスタイル:'rgb(0,0,0)'}); //+0.5 offset} </script> </head> <body> ↓ 処理済み ↓ 通常 ↓ +0.5 オフセット<br /> </body> </html>以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。