画布
// document 代表整个页面
// . 的 的意思
// getElementById 代表通过id来找到元素，注意要区分大小写
// "c1" 代表元素的id
// var 代表开辟空间
// a 代表空间的名字，是可以修改的
// = 赋值的意思
var a = document.getElementById("c1");
// a 现在相当于是 画布 的代言人
// .style 画布的样式
// .background 样式中的背景
// = "yellow" 代表改成黄色
// a.style.background = "yellow";
// 通过 a ，来得到1个画笔
// getContext 获取画笔
// "2d" 平面
// b 就是画笔的代言人了
var b = a.getContext("2d");
// 设置笔的颜色
b.strokeStyle = "black";
// 设置线的宽度
b.lineWidth = 10;
// 画线（内存里面先画好）
// 让笔 移动到 （100， 100） 的位置
b.lineTo(100, 100);
b.lineTo(200, 200);
b.lineTo(200, 100);
b.lineTo(100, 100);
b.lineTo(200, 200);
// 结束画三角形
b.closePath();
// 先画出来到也页面上
b.stroke();
// 画圆： 要重新开始
b.beginPath();
// 画圆
// 2*Math.PI 2π 代表 360度
// 圆的x坐标，y坐标 半径 起始角度 结束角度
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 代表填充图形
// 结束路径
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 是清除一块矩形区域
// 左上点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 代表 接受 调用传递过来的数值的空间，是一一对应的
function ball(x, y)
{
// 画圆
b.beginPath();
// 颜色： 三原色： 红 绿 蓝 （0~255 表示颜色的程度） 255 最红
// rgb(255, 0, 0) ==> 红色
// rgb(0, 255, 0) ==> 绿色
// parseInt 代表将数值转换成整数（舍弃小数部分）
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() 是产生 0~1 之间的数字（不包括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 是清除一块矩形区域
// 左上点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);
网友评论