Тема: Обробка пікселів в canvas javascript
Вивчаю js, знайшов потрібне, але не розумію як скористатися drawPixel та drawLine. Виклик drawLine(20, 30, 50, 50, 0, 0, 0) нічого не видає:
▼Прихований текст
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Про CANVAS</title>
</head>
<body>
<!-- ВІКНО ДЛЯ ВІДОБРАЖЕННЯ ГРАФІКИ -->
<canvas id="surface" width="800" height="600"></canvas>
<script>
//тут буде весь код
const ctx = document
.getElementById('surface')
.getContext('2d')
//отримання доступу до масиву пікселів, який будемо змінювати
//+ вказуємо розміри вікна, в якому малюватимемо
const imageData = ctx.createImageData(800, 600)
ctx.beginPath();
ctx.arc(30, 40, 10, 0, Math.PI*2, true);
ctx.stroke();
class Drawer {
surface = null
width = 0
height = 0
constructor(surface, width, height) {
this.surface = surface
this.width = width
this.height = height
}
drawPixel(x, y, r, g, b) {
const offset = (this.width * y + x) * 4
this.surface[offset] = r
this.surface[offset+1] = g
this.surface[offset+2] = b
this.surface[offset+3] = 255
}
drawLine(x1, y1, x2, y2, r, g, b) {
const c1 = y2 - y1
const c2 = x2 - x1
const length = Math.sqrt(c1 * c2 + c2 * c2)
const xStep = c2 / length
const yStep = c1 / length
for(let i = 0; i < length; i++) {
this.drawPixel(
Math.trunc(x1 + xStep * i),
Math.trunc(y1 + yStep * i),
r, g, b,
)
}
}
clearSurface() {
const surfaceSize = this.width * this.height * 4
for (let i = 0; i < surfaceSize; i++) {
this.surface[i] = 0
}
}
}
const drawer = new Drawer(
imageData.data,
imageData.width,
imageData.height
)
drawLine(20, 30, 50, 50, 0, 0, 0)
</script>
</body>
</html>Якщо комусь цікаво, хочу створити аналог людського мислення, де canvas є першим кроком до комп'ютерного зору.