Я писал небольшой плагин javascript, и у меня возникают небольшие проблемы с улучшением общего качества рендеринга холста. Я искал через Интернет здесь и там, но не могу найти ничего, что имеет смысл.
Линии, созданные из моих кривых, не являются гладкими, если вы посмотрите на jsfiddle ниже, вы поймете, что я имею в виду. Это выглядит неровно. Есть ли способ улучшить качество? Или есть Canvas Framework, который уже использует какой-либо метод для автоматического улучшения его качества, который я могу использовать в своем проекте?
Не уверен, что это поможет, но я использую этот код в начале моего script:
var c = document.getElementsByClassName("canvas");
for (i = 0; i < c.length; i++) {
var canvas = c[i];
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0, canvas.width, canvas.height);
ctx.lineWidth=1;
}
}
Заранее спасибо
Пример моего кода кривой:
var data = {
diameter: 250,
slant: 20,
height: 290
};
for (i = 0; i < c.length; i++) {
var canvas = c[i];
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo( 150 + ((data.diameter / 2) + data.slant ), (data.height - 3) );
ctx.quadraticCurveTo( 150 , (data.height - 15), 150 - ((data.diameter / 2) + data.slant ), (data.height - 3));
ctx.lineTo( 150 - ((data.diameter / 2) + data.slant ), data.height );
ctx.quadraticCurveTo( 150 , (data.height + 5), 150 + ((data.diameter / 2) + data.slant ), data.height);
ctx.closePath();
ctx.stroke();
}
