<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;margin: 50px auto;display:block;"></canvas>
<button style="margin-left: 50%;">播放</button>
<script type="text/javascript">
// 画星空
window.onload = function () {
// 找到画布
var canvas = document.getElementById("canvas");
// 定义画布的长宽
canvas.width = 1000;
canvas.height = 500;
// canvas上下文
var context = canvas.getContext("2d");
/**
* [skyStyle description]
* @type {[type]}
* createRadialGradient是径向渐变填充函数
*createRadialGradient的参数
*从左至右依次为:
* x0,y0,r0:起点的位置(相对canvas画布)和小圆的半径
* x1,y1,r1:扩散至的终点的位置和大圆的半径
*/
var skyStyle = context.createRadialGradient(
canvas.width / 2, canvas.height, 0,
canvas.width / 2, canvas.height, canvas.height);
skyStyle.addColorStop(1.0, 'black');
//将skyStyle用于填充展示天空的背景色
context.fillStyle = skyStyle;
//绘制矩形背景
context.fillRect(0, 0, canvas.width, canvas.height);
//获取按钮dom节点
var button = document.querySelector('button')
var isClick = false
//三元改变按钮文字内容
button.addEventListener('click', () => {
isClick = !isClick
button.innerHTML = !isClick ? "播放" : "暂停"
if (!isClick) {
window.location.reload();
}
})
// 封装绘制星星函数
function changeStarRandom() {
var num = Math.random() * 10 //随机数
for (var i = 0; i < num; i++) {
var r = Math.random() * 30 + 5;
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var a = Math.random() * 360;
drawStar(context, x, y, r, a);
}
}
// 以两秒钟的频率更换随机数
setInterval(() => {
// 按钮为false时清除画布
if (!isClick) {
return;
}
// 按钮为true时绘制星星
changeStarRandom()
}, 2000);
};
// 绘制五角星
// 改善后的drawStar使用了渐变色radialGrad(径向渐变)让天空的颜色更加逼真
/**
* [drawStar description]
* @param {[type]} cxt [description] 绘制的上下文环境
* @param {[type]} r [description] 五角星内部小圆的半径
* @param {[type]} R [description] 五角星外部大圆的半径
* @param {[type]} x [description] 五角星在水平方向上的位移
* @param {[type]} y [description] 五角星在竖直方向上的位移
* @param {[type]} rot [description] 五角星的旋转角度
* @return {[type]} [description]
*/
function drawStar(ctx, x, y, R, rot) {
ctx.save();//与restore()一起出现,防止状态影响其他的绘制
//图形变换
ctx.translate(x, y);//偏移
ctx.rotate(rot / 180 * Math.PI);//旋转
ctx.scale(R, R);//缩放比例
startPath(ctx);//开始绘制
ctx.fillStyle = "yellow";//内部填充的颜色
ctx.fill();//内部填充颜色
ctx.restore();
}
/**
* [startPath description]画星星的具体算法
* @param {[type]} ctx [description]
* @return {[type]} [description]
*/
function startPath(ctx) {
ctx.beginPath();
for (var i = 0; i < 5; i++) {
ctx.lineTo(Math.cos((28 + i * 72) / 180 * Math.PI),
-Math.sin((28 + i * 72) / 180 * Math.PI));
ctx.lineTo(Math.cos((64 + i * 72) / 180 * Math.PI) * 0.5,
-Math.sin((64 + i * 72) / 180 * Math.PI) * 0.5);
}
ctx.closePath();
}
</script>
</body>
</html>
技术:html+css
详细技术:canvas画布
web前端技术基础大作业2
实现点击按钮播放与暂停,实现随机放置星星