Все линии, нарисованные с помощью инструкций рисования линий 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) { //Серийный номер, количество этот .index = аргументы.callee.prototype.Count = (arguments.callee.prototype.Count || 0) + 1 var cvs =; document.createElement(canvas); cvs.id = myCanvas + this.index; cvs.width = ширина || cvs.height = высота || document.body).appendChild(cvs); /Excanvas Framework вручную инициализирует объект, если (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 || { 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.stroke() } }; 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,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.