Canvas в HTML5 отключить сглаживания на примитивные (кривые, …)

Как отключить эффект antialias в следующем коде ? Я использую Chrome 29.

JSFiddle здесь

var canvas = document.getElementById( 'test' );
var context = canvas.getContext( '2d' );

// These lines don't change anything
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;

context.beginPath();
context.arc(100, 100, 100, 0, Math.PI * 2, true );
context.closePath();

context.fillStyle = 'red';
context.fill( );
8
canvas html5 html5-canvas javascript

2 ответов

на imageSmoothingEnabledвлияет только изображения обращается к холсту с помощью drawImage() (отсюда и название изображенияSmoothingEnabled). К сожалению, нет способа отключить это для линий и фигур.

как и с ответом 6502 и предыдущими ответами, вам нужно будет реализовать" низкоуровневые " методы для достижения этого.

вот некоторые ссылки на некоторые общие алгоритмы для различных примитивов:

способ, которым вам нужно реализовать это, - получить координаты x и y из этих формул. Тогда вам нужно либо использовать rect(x, y, 1, 1) или установите пиксел сразу мимо изменение буфера данных изображения напрямую. Последние, как правило, быстрее для такого рода вещей.

в обоих случаях у вас будет относительно огромное снижение производительности, так как вам нужно повторять использование JavaScript по сравнению с внутренней скомпилированной итерацией браузера.

6

к сожалению, нет портативного способа отключить сглаживание при рисовании на холсте.

единственное решение, которое я нашел, - это переопределение графических примитивов, записывающих непосредственно данные изображения.

0