畫布
// document 代表整個頁面
// .? 的 的意思
// getElementById 代表通過id來找到元素，注意要區(qū)分大小寫
// "c1" 代表元素的id
// var 代表開辟空間
// a? 代表空間的名字，是可以修改的
// =? 賦值的意思
var a = document.getElementById("c1");
// a 現(xiàn)在相當于是 畫布 的代言人
// .style 畫布的樣式
// .background 樣式中的背景
// = "yellow" 代表改成黃色
// a.style.background = "yellow";
// 通過 a ，來得到1個畫筆
//? ? getContext 獲取畫筆
//? ? "2d" 平面
// b 就是畫筆的代言人了
var b = a.getContext("2d");
// 設(shè)置筆的顏色
b.strokeStyle = "black";
// 設(shè)置線的寬度
b.lineWidth = 10;
// 畫線（內(nèi)存里面先畫好）
//? 讓筆 移動到 （100， 100） 的位置
b.lineTo(100, 100);
b.lineTo(200, 200);
b.lineTo(200, 100);
b.lineTo(100, 100);
b.lineTo(200, 200);
// 結(jié)束畫三角形
b.closePath();
// 先畫出來到也頁面上
b.stroke();
// 畫圓： 要重新開始
b.beginPath();
// 畫圓
//? ? 2*Math.PI? 2π 代表 360度
//? 圓的x坐標，y坐標? 半徑 起始角度? 結(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? );
// 畫線，畫到頁面上
b.stroke();
var a = document.getElementById("c1");
var b = a.getContext("2d");
// strokeStyle 代表的是線型的顏色
// fillStyle 代表填充的顏色
b.fillStyle = "black";
// 畫圓
b.arc(100, 100, 50, 0, 2*Math.PI);
// stroke 代表畫空心的
// 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()
{
// 清除畫布
//? b? 畫筆
//? clearRect 是清除一塊矩形區(qū)域
//? ? ? ? 左上點x， 左上點y，? 右下點x， 右下點y
b.clearRect(0, 0, 500, 500);
// y 值越來越小，從而球會越往上面走
y = y + ySpeed;
// 如果 y 的值小于0，說明到達頂端了
if (y < 0)
{
ySpeed = -1 * ySpeed;? // 反向
}
if (y > 500)
{
ySpeed = -1 * ySpeed;? // 反向
}
ball(x, y);
}
// 定時器，跑
setInterval( up, 100);
js
var a = document.getElementById("c1");
var b = a.getContext("2d");
//? ball 球球
//? ? x, y? 代表 接受 調(diào)用傳遞過來的數(shù)值的空間，是一一對應的
function ball(x, y)
{
// 畫圓
b.beginPath();
//? 顏色： 三原色： 紅? 綠? 藍? ? ? （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() );? // 藍色
b.fillStyle = "rgb("+rr+","+gg+","+bb+")";
b.arc(x, y, 50, 0, 2*Math.PI);
b.fill();
b.closePath();
}
// 寫1個功能，專門制造 隨機位置的球球
//? 功能名字： csball
function csball()
{
}
//? Math.random()? 是產(chǎn)生 0~1 之間的數(shù)字（不包括1）
var x = Math.random() * 500;
var y = Math.random() * 500;
// 在 x,y 的位置畫1個球球
ball(x, y);
}
var x = 200;
var y = 200;
var xSpeed = -5;? // x 速度
var ySpeed = -20;? // y 速度
// update 更新
function update()
{
// 清空畫布
b.clearRect(0, 0, 500, 500);
x = x + xSpeed;
y = y + ySpeed;
// y 的速度值越來越慢，相當于是絕對值越來越小
ySpeed = ySpeed + 2;
ball(x, y);
}
// 定時器
setInterval(update, 200);
!-- 1. 引入工具庫 -->
(把做好的球素材制定成js工具)
// 往上拋
<script src = "1.js"></script>
<script>
var x = 200;
var y = 500;
// y 軸的速度
var ySpeed = -20;
function up()
{}
// 清除畫布
//? b? 畫筆
//? clearRect 是清除一塊矩形區(qū)域
//? ? ? ? 左上點x， 左上點y，? 右下點x， 右下點y
b.clearRect(0, 0, 500, 500);
// y 值越來越小，從而球會越往上面走
y = y + ySpeed;
// 如果 y 的值小于0，說明到達頂端了
if (y < 0)
{}
ySpeed = -1 * ySpeed;? // 反向
}
if (y > 500)
{
ySpeed = -1 * ySpeed;? // 反向
}
ball(x, y);
}
// 定時器，跑
setInterval( up, 100);
