確かこのアルゴリズムはブレゼンハムだったかな？
(Google Chromeブラウザでのみ動作チェックしています)
＜ソースコード＞
var ctx;
var bmp;
var w,h;
var dt;
function pset(x,y,r,g,b,a)
{
var st = (x + w * y) * 4;
dt[st++] = r;
dt[st++] = g;
dt[st++] = b;
dt[st++] = a;
}
function line(sx,sy,ex,ey,r,g,b,a)
{
var dx = ex - sx;
var dy = ey - sy;
var adx = Math.abs(dx);
var ady = Math.abs(dy);
if(adx > ady)
{
var ddy = Math.floor(adx / 2);
var dxtick = (dx < 0)?-1:1;
var dytick = (dy < 0)?-1:1;
for(;sx != ex;sx += dxtick)
{
pset(sx,sy,r,g,b,a);
ddy += ady;
if(ddy >= adx)
{
ddy -= adx;
sy += dytick;
}
}
} else {
var ddx = Math.floor(ady / 2);
var dxtick = (dx < 0)?-1:1;
var dytick = (dy < 0)?-1:1;
for(;sy != ey;sy += dytick)
{
pset(sx,sy,r,g,b,a);
ddx += adx;
if(ddx >= ady)
{
ddx -= ady;
sx += dxtick;
}
}
}
}
function draw()
{
line(Math.floor(Math.random() * (w - 1)),Math.floor(Math.random() * (h - 1))
,Math.floor(Math.random() * (w - 1)),Math.floor(Math.random() * (h - 1))
,Math.floor(Math.random() * 255),Math.floor(Math.random() * 255),Math.floor(Math.random() * 255),255);
ctx.putImageData(bmp,0,0);
}
window.onload = function()
{
ctx = document.getElementById("ctx").getContext("2d");
w = document.getElementById("ctx").width;
h = document.getElementById("ctx").height;
bmp = ctx.createImageData(w,h);
dt = bmp.data;
}
タグ：HTML5 canvas
| 
| 
| 