เส้นทั้งหมดที่วาดโดยคำสั่งการวาดเส้นของ 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, ความกว้าง, ความสูง) { //หมายเลขซีเรียล, นับ นี้ .index = arguments.callee.prototype.Count = (arguments.callee.prototype.Count || 0) + 1; var cvs = document.createElement(canvas); cvs.id = myCanvas + this.index; cvs.width = ความกว้าง ||. 800; cvs.height = ความสูง ||. /กรอบงาน Excanvas เริ่มต้นวัตถุด้วยตนเองถ้า (typeof G_vmlCanvasManager != ไม่ได้กำหนด) เพื่อแก้ไขปัญหาความล่าช้าในการโหลด IE G_vmlCanvasManager.initElement(cvs); // วัตถุแคนวาส 2D this.ctx = cvs.getContext (2d); /* * วาดเส้น* วัตถุ @ops JSON ซึ่งสามารถขยายได้ตามแอตทริบิวต์จริงที่รองรับ ตัวอย่าง: { 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 in ops) this.ctx [att] = ops[att]; dotXY = dotXY.constructor == วัตถุ ? [dotXY ||. dotXY; this.ctx.moveTo(dotXY[0].x, dotXY[0].y); สำหรับ (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, 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, strokeStyle:'rgb(0,0,0)'}); //บรรทัดสามัญ 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> ↓ ประมวลผล ↓ สามัญ ↓ +0.5 ออฟเซ็ต<br /> </body> </html>ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network