рони,
Вот тебе функция:
//<canvas id="canvas" width="300" height="300" style="border: 1px solid #000"></canvas>
function setPixel (x, y) {
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x, y, 1, 0, Math.PI*2, true);
ctx.fill();
ctx.closePath();
}
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0,0,0,1)';
Можешь нарисовать на канвас то, что у тебя получилось? Я не очень понимаю куда мне подставлять отрицательные значения из твоего кода. Вот координаты двух линий: x1 = 10, y1 = 10, x2 = 100, y2 = 100; x1 = 10, y1 = 100, x2 = 100 y2 = 10; |
Цитата:
function drawLineTo(x1, y1, x2, y2) {
var deltaX = Math.abs(x2 - x1),
deltaY = Math.abs(y2 - y1),
signX = x1 < x2 ? 1 : -1,
signY = y1 < y2 ? 1 : -1,
error = deltaX - deltaY;
setPixel(x2, y2);
while (x1 != x2 || y1 != y2) {
setPixel(x1, y1);
var error2 = error * 2;
if (error2 > -deltaY) {
error -= deltaY;
x1 += signX;
}
if (error2 < deltaX) {
error += deltaX;
y1 += signY;
}
}
}
|
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<canvas id="canvas" width="300" height="300" style="border: 1px solid #000"></canvas>
<script>
function setPixel (x, y) {
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x, y, 1, 0, Math.PI*2, true);
ctx.fill();
ctx.closePath();
}
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0,0,0,1)';
x1 = 10, y1 = 10, x2 = 100, y2 = 100;
var time = Math.abs(x1 - x2);
for (var i=0; i<time; i++) {
var delta = i/time ;
var a = delta*(x2 - x1) + x1;
var b = delta*(y2 - y1) + y1;
setPixel(a,b)
}
x1 = 10, y1 = 100, x2 = 100, y2 = 10;
var time = Math.abs(x1 - x2);
for (var i=0; i<time; i++) {
var delta = i/time ;
var a = delta*(x2 - x1) + x1;
var b = delta*(y2 - y1) + y1;
setPixel(a,b)
}
</script>
</body>
</html>
|
JsLoveR,
Спасибо. Я нашел немного другой, он по скорости чуть чуть быстрее:
function setLine (x1, y1, x2, y2) {
var x = x1,
y = y1;
var dx = Math.abs(x2-x1),
dy = Math.abs(y2-y1);
var sx = (x2-x1)>0?1:((x2-x1)==0?0:-1);
var sy = (y2-y1)>0?1:((y2-y1)==0?0:-1);
var tx, ty;
var z, scount, count, dcount;
if (dx>=dy) {
tx = sx; ty = 0;
} else {
z=dx; dx=dy; dy=z;
tx=0; ty=sy;
}
scount = 2*dy;
count = scount-dx;
dcount = count-dx;
for(;;) {
dx -= 1;
if (dx < -1){
break;
}
setPixel(x, y);
if (count >= 0) {
x+=sx;
y+=sy;
count += dcount;
} else {
x+=tx;
y+=ty;
count += scount;
}
}
}
|
Цитата:
эт на будущее, по скольку спускаемся на уровень абстракции ниже ближе к железу, то это раз в сто быстрее чем яваскриптом считать Этим же трюком можно чекать пересекаются ли фигуры в физических яваскрипт движках) аппаратное ускорение хули |
for(;;) не пиши так больше, пиши while(true) как все нормальные люди, и даже не while(1), именно while(true), как взрослый образованный человек, не дикарь. |
рони,
Что-то не работает:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000" style="border: 1px solid #000"></canvas>
<script>
function setPixel (x, y) {
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x, y, 1, 0, Math.PI*2, true);
ctx.fill();
ctx.closePath();
}
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0,0,0,1)';
function ronyLine (x1, y1, x2, y2) {
var time = Math.abs(x1 - x2),
a, b, delta, i;
for (i=0; i<time; i++) {
delta = i/time;
a = delta*(x2 - x1) + x1;
b = delta*(y2 - y1) + y1;
setPixel(a,b)
}
}
for(var i=0;i<1000;i+=1) {
ronyLine(10, 10, i, 200);
}
</script>
</body>
</html>
Упс, работает, но что-то мне подсказывает, что лучше так не делать :) |
__он_самый__,
Цитата:
|
Gozar,
28 строка зачем? |
Цитата:
|
| Часовой пояс GMT +3, время: 07:47. |