畫(huà)布
// document 代表整個(gè)頁(yè)面
// .? 的 的意思
// getElementById 代表通過(guò)id來(lái)找到元素，注意要區(qū)分大小寫(xiě)
// "c1" 代表元素的id
// var 代表開(kāi)辟空間
// a? 代表空間的名字未玻，是可以修改的
// =? 賦值的意思
var a = document.getElementById("c1");
// a 現(xiàn)在相當(dāng)于是 畫(huà)布 的代言人
// .style 畫(huà)布的樣式
// .background 樣式中的背景
// = "yellow" 代表改成黃色
// a.style.background = "yellow";
// 通過(guò) a 斩狱，來(lái)得到1個(gè)畫(huà)筆
//? ? getContext 獲取畫(huà)筆
//? ? "2d" 平面
// b 就是畫(huà)筆的代言人了
var b = a.getContext("2d");
// 設(shè)置筆的顏色
b.strokeStyle = "black";
// 設(shè)置線的寬度
b.lineWidth = 10;
// 畫(huà)線（內(nèi)存里面先畫(huà)好）
//? 讓筆 移動(dòng)到 （100侵贵， 100） 的位置
b.lineTo(100, 100);
b.lineTo(200, 200);
b.lineTo(200, 100);
b.lineTo(100, 100);
b.lineTo(200, 200);
// 結(jié)束畫(huà)三角形
b.closePath();
// 先畫(huà)出來(lái)到也頁(yè)面上
b.stroke();
// 畫(huà)圓： 要重新開(kāi)始
b.beginPath();
// 畫(huà)圓
//? ? 2*Math.PI? 2π 代表 360度
//? 圓的x坐標(biāo)东抹，y坐標(biāo)? 半徑 起始角度? 結(jié)束角度
b.arc(300,? ? ? 300,? 100,? 0,? ? ? 0.6*Math.PI? );
b.stroke();
b.beginPath();
b.arc(200,? ? ? 100,? 100,? 0,? ? ? 0.6*Math.PI? );
// 畫(huà)線介蛉，畫(huà)到頁(yè)面上
b.stroke();
var a = document.getElementById("c1");
var b = a.getContext("2d");
// strokeStyle 代表的是線型的顏色
// fillStyle 代表填充的顏色
b.fillStyle = "black";
// 畫(huà)圓
b.arc(100, 100, 50, 0, 2*Math.PI);
// stroke 代表畫(huà)空心的
// fill 代表填充圖形
// 結(jié)束路徑
b.fill();
b.closePath();
b.beginPath();
b.fillStyle = "black";
b.arc(250, 100, 50, 0, 2*Math.PI);
b.fill();
b.closePath();
b.fillStyle = "black";
b.arc(250, 300, 50, 0, 2*Math.PI);
b.fill();
b.closePath();
// ball(200, 200);
// csball();
// setInterval(csball, 1000);
// 往上拋
var x = 200;
var y = 500;
// y 軸的速度
var ySpeed = -20;
// 功能 up ： 讓球球不斷往上面走
function up()
{
// 清除畫(huà)布
//? b? 畫(huà)筆
//? clearRect 是清除一塊矩形區(qū)域
//? ? ? ? 左上點(diǎn)x爆阶， 左上點(diǎn)y燥透，? 右下點(diǎn)x， 右下點(diǎn)y
b.clearRect(0, 0, 500, 500);
// y 值越來(lái)越小辨图，從而球會(huì)越往上面走
y = y + ySpeed;
// 如果 y 的值小于0班套，說(shuō)明到達(dá)頂端了
if (y < 0)
{
ySpeed = -1 * ySpeed;? // 反向
}
if (y > 500)
{
ySpeed = -1 * ySpeed;? // 反向
}
ball(x, y);
}
// 定時(shí)器，跑
setInterval( up, 100);
js
var a = document.getElementById("c1");
var b = a.getContext("2d");
//? ball 球球
//? ? x, y? 代表 接受 調(diào)用傳遞過(guò)來(lái)的數(shù)值的空間故河，是一一對(duì)應(yīng)的
function ball(x, y)
{
// 畫(huà)圓
b.beginPath();
//? 顏色： 三原色： 紅? 綠? 藍(lán)? ? ? （0~255 表示顏色的程度） 255 最紅
//? ? ? ? ? ? ? ? rgb(255, 0, 0)? ==> 紅色
//? ? ? ? ? ? ? ? rgb(0, 255, 0)? ==> 綠色
// parseInt 代表將數(shù)值轉(zhuǎn)換成整數(shù)（舍棄小數(shù)部分）
var rr = parseInt( 256 * Math.random() );? // 紅色
var gg = parseInt( 256 * Math.random() );? // 綠色
var bb = parseInt( 256 * Math.random() );? // 藍(lán)色
b.fillStyle = "rgb("+rr+","+gg+","+bb+")";
b.arc(x, y, 50, 0, 2*Math.PI);
b.fill();
b.closePath();
}
// 寫(xiě)1個(gè)功能吱韭，專(zhuān)門(mén)制造 隨機(jī)位置的球球
//? 功能名字： csball
function csball()
{
}
//? Math.random()? 是產(chǎn)生 0~1 之間的數(shù)字（不包括1）
var x = Math.random() * 500;
var y = Math.random() * 500;
// 在 x,y 的位置畫(huà)1個(gè)球球
ball(x, y);
}
var x = 200;
var y = 200;
var xSpeed = -5;? // x 速度
var ySpeed = -20;? // y 速度
// update 更新
function update()
{
// 清空畫(huà)布
b.clearRect(0, 0, 500, 500);
x = x + xSpeed;
y = y + ySpeed;
// y 的速度值越來(lái)越慢，相當(dāng)于是絕對(duì)值越來(lái)越小
ySpeed = ySpeed + 2;
ball(x, y);
}
// 定時(shí)器
setInterval(update, 200);
!-- 1. 引入工具庫(kù) -->
(把做好的球素材制定成js工具)
// 往上拋
<script src = "1.js"></script>
<script>
var x = 200;
var y = 500;
// y 軸的速度
var ySpeed = -20;
function up()
{}
// 清除畫(huà)布
//? b? 畫(huà)筆
//? clearRect 是清除一塊矩形區(qū)域
//? ? ? ? 左上點(diǎn)x鱼的， 左上點(diǎn)y理盆，? 右下點(diǎn)x， 右下點(diǎn)y
b.clearRect(0, 0, 500, 500);
// y 值越來(lái)越小凑阶，從而球會(huì)越往上面走
y = y + ySpeed;
// 如果 y 的值小于0猿规，說(shuō)明到達(dá)頂端了
if (y < 0)
{}
ySpeed = -1 * ySpeed;? // 反向
}
if (y > 500)
{
ySpeed = -1 * ySpeed;? // 反向
}
ball(x, y);
}
// 定時(shí)器，跑
setInterval( up, 100);
