canvas畫布 隨機動感小球

這兩天學習canvas，把一些東西總結一下，比起枯燥的每一條的總結，直接上**來的更直接。

index.html檔案

var c=document.getelementbyid("canvas3");

var ctx=c.getcontext("2d");
var arr=;
var maxdata=30;
//隨機產生小球
timer=setinterval(function()
//小球圓心座標及半徑隨機產生
x=200+math.ceil(math.random()*600);
y=30+math.ceil(math.random()*100);
r=20+math.ceil(math.random()*10);
//小球顏色隨機產生
var red=math.floor(math.random()*256);
var blue=math.floor(math.random()*256);
var green=math.floor(math.random()*256);
var alpha=0.5+math.random()*0.3;
//小球運動速度隨機產生(-2,2)之間
var sx=-2+math.ceil(math.random()*4);
var sy=-2+math.ceil(math.random()*4);
var obj=,$,$,$)`,
x:x,//隨機小圓圓心座標橫座標
y:y,//隨機小圓圓心座標縱座標
r:r,隨機小圓半徑
sx:sx,//隨機速度x
sy:sy//隨機速度y
} //防止小球不動
if(sx!==0 || sy!==0)
},1000/20);
//每一秒重新整理60次畫布，讓小球動起來
setinterval(function()
if(arr[i].x+arr[i].r>=c.width || arr[i].x-arr[i].r<=0)
ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*math.pi);
ctx.fillstyle=arr[i].background;
ctx.strokestyle="blue";
ctx.stroke();
ctx.fill();
}},1000/60);

#canvas3

.text
html h2

了解canvas畫布

一 什麼是 canvas？二 canvas基本使用 mycanvas width 300 height 300 canvas canvas畫布的預設尺寸是300 150 1 獲取到canvas元素 var c document.getelementbyid mycanvas 2 執行上下文 繪製畫筆...

學習canvas畫布

我們可以用畫布 canvas 繪製各種圖形，下面 是繪製的乙個圓形 doctype html html head title canvas畫布 title meta charset utf 8 meta name viewport content width device width,initial...

canvas畫布基本操作

簡單畫直線和三角形 結合注釋 線條繪製 canvas width 1024 height 768 style border 1px solid aaa display block margin 50px auto 當前瀏覽器不支援canvas，請更換瀏覽器後再試 canvas canvas是基於狀態...