canvas小實踐動態點線

效果預覽

初始化相關變數

var c = document.

getelementbyid
("mycanvas");
//設定canvas大小
c.height = document.body.offsetheight;
c.width = document.body.offsetwidth;
//canvas跟隨視窗大小
window.
onresize
=function()
;var thecanvas = c.
getcontext
("2d");
var pointlist =
;//儲存points
var anim =
null
;var selectpoint =
null
;

var

pointline
=function
(canvas, x, y, r, color)
;//檢查是否出界，若出界就改變為反方向
this
.checkx
=function
(x)else
if(x +
this
.r >=
this
.thecanvas.canvas.width)
else
this
.x = x;};
this
.checky
=function
(y)else
if(y +
this
.r >=
this
.thecanvas.canvas.height)
else
this
.y = y;};
//移動點
this
.movepoints
=function()
elseif(
this
.direction ==1)
elseif(
this
.direction ==2)
elseif(
this
.direction ==3)
};return
this;}
;

//兩點間連線

function
drawline
(start, end)
//兩點之間距離
function
getdistance
(p1, p2)
var mindistance =
parseint
(0.1
* thecanvas.canvas.height)
; mindistance = mindistance * mindistance;
//連線的最短距離
//一點與其他點連線
function
drawlinkline
(p1)
}}

//生產隨機顏色

function
randcolor()
//生成隨機點
function
createpoint()
//生成100個隨機點線
for(
var i =
0; i <
100; i++
)

//啟用動畫

function
canvasanimation()
, self.timeout);}
);}//取消動畫
function
canvascancleanim()

//迴圈執行canvas動畫

function
start()
}//開始動畫
start()
;

//px座標轉canvas座標

function
windowtocanvas
(canvas, x, y);}
//設定動作，按下選中點
thecanvas.canvas.
onmousedown
=function
(e)}};
//移動點
thecanvas.canvas.
onmousemove
=function
(e)}
;//取消選中點
thecanvas.canvas.
onmouseup
=function
(e);

canvas實現動態點線背景，滑鼠畫點連線。

html css canvasjs 動態背景 class circle canvas 畫圓和畫直線 畫圓就是正常的用canvas畫乙個圓 畫直線是兩個圓連線，為了避免直線過多，給圓圈距離設定了乙個值，距離很遠的圓圈，就不做連線處理 drawcircle ctx drawline ctx,circle...

動態開點線段樹

前置芝士 眾所周知，普通線段樹空間複雜度是 o n 4 所以當n很大的時候，如果正常的去建一顆線段樹，開4倍n空間顯然會炸記憶體 怎麼辦呢？這個時候，動態開點線段樹出現了。概念 動態開點線段樹是一類特殊的線段樹，與普通的線段樹不同的是，每乙個節點的左右兒子不是該點編號的兩倍和兩倍加一，而是現加出來的...

學習筆記 動態開點線段樹

通過只開需要使用的結點以節省空間。實現過程就是把點乙個乙個往樹裡面插。建樹時遞迴進入當前結點的子結點後，若該結點為 0 即不存在，就開點。所謂開點即為把當前結點的編號設定為 tot 這樣處理下來，每個結點的編號顯然是亂序的。可以 l son 和 r son 分別記錄左右子結點的編號，然後讓它們代替普...