Блог

Главная - Вопросы по программированию - Закругленные углы неправильно отображаются на холсте HTML5

Закругленные углы неправильно отображаются на холсте HTML5

#javascript #canvas #html5-canvas

#javascript #холст #html5-canvas

Вопрос:

Кто-нибудь знает, почему закругленные углы выглядят неправильно?

 ctx.beginPath();
        ctx.moveTo(x   this.cornerRadius, y);
        ctx.lineTo(x   thisWidth - this.cornerRadius, y);
        ctx.quadraticCurveTo(x   thisWidth, y, x   thisWidth, y   this.cornerRadius);
        ctx.lineTo(x   thisWidth, y   thisHeight - this.cornerRadius);
        ctx.quadraticCurveTo(x   thisWidth, y   thisHeight, x   thisWidth - this.cornerRadius, y   thisHeight, this.cornerRadius);
        ctx.lineTo(x   this.cornerRadius, y   thisHeight);
        ctx.quadraticCurveTo(x, y   thisHeight, x, y   this.height - this.cornerRadius);
        ctx.lineTo(x, y   this.cornerRadius);
        ctx.quadraticCurveTo(x, y, x   this.cornerRadius, y);
  ctx.closePath();

Проблема с закругленными углами

Комментарии:

1. Есть ли какая-то особая причина, по которой вы используете квадратные кривые, а не дуги?

2. Нет, именно так я и поступил.

3. Я обновился, чтобы использовать arc, и это тот же результат.

4. Не могли бы вы предоставить нам больше кода? Немного сложно следовать, не зная, что такое this.cornerRadius и thisWidth . Просто поделитесь ссылкой на демонстрацию JSFiddle или что-то в этом роде

5. Извините, я думал, это подразумевалось. Я рисую прямоугольник на изображении. Таким образом, thisWidth и thisHeight — это размеры прямоугольника, а cornerRadius — радиус углов.

Ответ №1:

 canvas = document.getElementById('a');
ctx = canvas.getContext('2d');
function roundedRect(x,y,w,h,radius){
    ctx.moveTo(x radius,y);
    ctx.lineTo(x w-radius,y);
    ctx.arcTo(x w,y,x w,y radius,radius);
    ctx.lineTo(x w,y h-radius);
    ctx.arcTo(x w,y h,x w-radius,y h,radius);
    ctx.lineTo(x radius,y h);
    ctx.arcTo(x,y h,x,y h-radius,radius);
    ctx.lineTo(x,y radius);
    ctx.arcTo(x,y,x radius,y,radius);    
    ctx.stroke();
}
roundedRect(100,50,100,100,10);

Метод arcTo был создан для таких целей. Прочитайте о методе arcTo здесь . (В MDN нет очень хорошей документации или примеров)
Демонстрация здесь

Комментарии:

1. Я использовал ваш фрагмент в своем коде, и он отображает то же самое. Я думаю, что есть еще одна проблема. На самом деле вы хотите ввести .5 для x и y, иначе вы получите нечеткие линии. ( jsfiddle.net/ischyrus/5GpMv ) Если вы посмотрите на это, углы все равно будут выглядеть неправильно.

2. @Steven, я думаю, что это проблема, связанная с операционной системой или браузером, потому что углы выглядят для меня совершенно нормально. Обычно используются 0,5 пикселя ( объясняется здесь ).