浪漫的玫瑰花總讓人陶醉，那么我們也可以通過(guò)代碼來(lái)實(shí)現(xiàn)滿屏的玫瑰花效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滿屏玫瑰花</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;
var colors = ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#1c84c6", "#259b24", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#9e9e9e", "#607d8b"];
var random = Math.random;
function Petal() {
this.x = w / 2;
this.y = h / 2;
this.r = 10 * random() + 10;
this.color = colors[Math.floor(random() * colors.length)];
var maxR = Math.sqrt(Math.pow(w / 2, 2) + Math.pow(h / 2, 2));
this.update = function (t) {
var scale = (Math.sin(t + this.r) + 1) / 2 * 2.5;
this.r += scale;
this.x = w / 2 + Math.cos(t * 2) * maxR * Math.sin(this.r / 20);
this.y = h / 2 + Math.sin(t * 2) * maxR * Math.sin(this.r / 20);
}
this.draw = function () {
context.beginPath();
context.arc(this.x, this.y, this.r, 0, Math.PI * 2);
context.fillStyle = this.color;
context.fill();
}
}
var petal = new Petal();
var t = 0;
function loop() {
requestAnimationFrame(loop);
t += 0.01;
context.clearRect(0, 0, w, h);
petal.update(t);
petal.draw();
}
loop();
</script>
</body>
</html>在這個(gè)代碼中，我們使用了HTML5的canvas元素來(lái)繪制玫瑰花的形狀，并且在不斷的更新和重繪畫(huà)布，才得以實(shí)現(xiàn)玫瑰花在屏幕上的效果。通過(guò)調(diào)整代碼中的細(xì)節(jié)參數(shù)，我們可以獲得不同形狀、大小和顏色的玫瑰花，讓頁(yè)面更加生動(dòng)有趣。
上一篇java 和通信方式
下一篇css ul超出li隱藏