تحتوي جميع الخطوط المرسومة بواسطة تعليمات رسم الخط في 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 = الوسيطات.callee.prototype.Count = (arguments.callee.prototype.Count || 0) + 1; var cvs = document.createElement(canvas); = myCanvas + this.index; يقوم إطار عمل /Excanvas بتهيئة الكائن يدويًا إذا كان (typeof G_vmlCanvasManager ! = غير محدد) لحل مشكلة تأخير تحميل قماش IE G_vmlCanvasManager.initElement(cvs); // كائن قماش ثنائي الأبعاد 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 == Object ? [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() }; window.onload=function(){ var c1 = new MyCanvas(); ); c1.drawLine([{ س: 11, ص: 10 }, { س: 11, ص: 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 إزاحة} </script> </head> <body> ↓ تمت المعالجة ↓ عادي ↓ +0.5 إزاحة<br /> </body> </html>ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.