Как нарисовать овал в массив?
Голова кипит спасайте кто может)
Вопрос больше не к javascript, а к математики, как заполнить многомерную матрицу (2d) цифрами образуя овал? Допустим есть матрица 7х5, как реализовать её заполнение такого вида: 0001000 0111110 1111111 0111110 0001000 Или вопрос по другому, есть canvas и я пытаюсь понять как из прямоугольника одного цвета сделать вписаный овал в этот прямоугольник с затуханием альфа канала. var canvas = document.createElement('canvas'), context = canvas.getContext('2d'), image = context.createImageData(12, 16), data = image.data; canvas.width = 12; // Может быть любое значение canvas.height = 16; // Может быть любое значение for(var i = 0; i < data.length; i+=4) { data[i] = 255; data[i+1] = 255; data[i+2] = 255; data[i+3] = ????; // Прозрачность (0-255) как её для каждого пикселя просчитать? } context.putImageData(image, 0, 0); P.S. Нативные функции рисования мне не подойдут( P.P.S. Давно с подобным не сталкивался. в голове клин от всяких синусов и косинусов |
Цитата:
пусть эллипс с центром в точке (a, b) и радиусами (А, В) тогда закрашиваются все точки с координатами (х, у), которые удовлетворяют условию (x - a)**2 / A**2 + (y - b)**2 / B**2 <= 1 здесь "**2" - возведение в квадрат. для ускорения этого дела, не надо для каждой точки проверять это неравенство, а, например, для каждой горизонтальной линии просто вычислить начальный и конечный Х и всё что между ними заполнить но это для простого случая, когда эллипс горизонтальный или вертикальный. А если он наклонный, то ещё матрицу преобразований надо будет делать, тут навскидку не помню. |
Огромное спасибо тебе добрый человек, это именно, то что мне нужно!)))
Самое забавное, что я видел эту формулу, но после кучи материалов по данной теме я не смог понять, что это именно оно:( Надеюсь кому-нибудь тоже пригодится. |
Что в итоге получилось, может кому пригодится.
var width = 80, height = 100, color = [255, 255, 255], depth = 100; // 1-100 scale = 100; // 1-100 canvas = document.createElement('canvas'), context = canvas.getContext('2d'), image = context.createImageData(width, height), data = image.data; canvas.width = width; canvas.height = height; for(var j = 0, row = 0, column = 0; j < data.length; j+=4, column++) { if(column >= width) { row++; column = 0; } data[j] = color[0]; data[j+1] = color[1]; data[j+2] = color[2]; data[j+3] = 255 * ((scale * 0.02 - (Math.pow(row - height/2, 2) / Math.pow(height/2, 2) + Math.pow(column - width/2, 2) / Math.pow(width/2, 2)))/(depth/100)) } context.putImageData(image, 0, 0); P.S. с терминами может напутал scale и depth |
Skipp,
а почему всё-таки не воспользовался стандартными канвасными примитивами? из-за сглаживания? |
Alexandroppolus,
И не только. Делаю генерацию частиц так сказать дыма, добавил туда ещё шумов и получилось вполне ничего, особенно в скоплении) |
Часовой пояс GMT +3, время: 00:48. |