Semua garis yang digambar oleh instruksi menggambar garis di Html5 Canvas memiliki gerinda (seperti lineTo, arcTo, strokeRect. Hal ini karena posisi yang sesuai dengan nilai koordinat integer di Canvas kebetulan merupakan celah antara piksel layar, jadi saat Anda tekan seperti ini Koordinat yang digunakan saat merender garis adalah piksel di kedua sisi celah. Dengan cara ini, meskipun lebar garis disetel ke 1, Anda akan melihat garis dengan efek dua piksel +0,5.
Berikut perbandingan efek sebelum dan sesudah perawatan:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html> <head> <meta http-equiv=Content-Type konten=teks/html; charset=utf-8> <judul>tes kanvas</title> <tipe skrip=teks/javascript src=http://www.pyzy.net/Demo/html5_cancas_js/excanvas.js></script> <script type=text/javascript> var MyCanvas = function(boxObj, width, height) {/ //Nomor seri, jumlah ini .index = argument.callee.prototype.Count = (arguments.callee.prototype.Count || 0) + 1; dokumen.createElement(cvs.id = myCanvas + this.index; cvs.width = lebar ||.cvs.height = tinggi || / Kerangka kerja Excanvas secara manual menginisialisasi objek jika (typeof G_vmlCanvasManager != tidak terdefinisi) untuk menyelesaikan masalah penundaan pemuatan kanvas IE G_vmlCanvasManager.initElement(cvs); //objek kanvas 2D this.ctx = cvs.getContext(2d); /* * Gambar garis* @ops objek JSON, yang dapat diperluas sesuai dengan atribut sebenarnya yang didukung, contoh: { 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(); untuk (var att di ops) this.ctx [att] = ops[att]; dotXY = dotXY.konstruktor == Objek ? [dotXY ||. dotXY; ini.ctx.moveTo(dotXY[0].x, dotXY[0].y); untuk (var i = 1, len = dotXY.length; i < len; i++) ini.ctx.lineTo(dotXY[ i].x, dotXY[i].y); ini.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 }],{Lebar Garis:2,Style Stroke:'rgb(255.255.255)'}); c1.drawLine([{ x: 100, y: 10 }, { x: 100, y: 200 }],{Lebar Garis:1, gaya stroke:'rgb(0,0,0)'}); //Baris biasa 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> ↓ Diproses ↓ Biasa ↓ +0,5 offset<br /> </body> </html>Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.