快过年了，用JS让你的网页放
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">马上就要过春节了，大城市里依然是不准燃放烟花这种空气污染的东西的，想念小时候在自家院子里放花的快乐时光，大城市里的小<span style="color: black;">伴侣</span>们是体会不到这种快乐了。但<span style="color: black;">做为</span>前端工程师，这难不倒<span style="color: black;">咱们</span>，下面就教<span style="color: black;">大众</span><span style="color: black;">怎样</span>用JS在网页里放烟花。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-aa3a46c40612545a3d398d01500c989e_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这篇<span style="color: black;">文案</span>看完，<span style="color: black;">保准</span>你在任何平台，用任何语言都<span style="color: black;">能够</span>写出来放烟花的效果</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">怎样</span>实现的？</h2>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">先创建一个Canvas</h2>先新建一个和网页可视区<span style="color: black;">体积</span><span style="color: black;">同样</span>的canvas，并且<span style="color: black;">经过</span>监听<span style="color: black;">表示</span>区的resize事件，来改变canvas的<span style="color: black;">体积</span>。<div style="color: black; text-align: left; margin-bottom: 10px;">var canvas = document.getElementById(myCanvas);
var context = canvas.getContext(2d);
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
function clearCanvas(){
context.fillStyle = #ffffff;
context.fillRect(0,0,canvas.width, canvas.height);
}
window.addEventListener(resize, resizeCanvas, false);
resizeCanvas();</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">放烟花之前的练习</h2>烟花都是从一个点爆炸，<span style="color: black;">伴同</span>着<span style="color: black;">区别</span>的弧度散开，<span style="color: black;">因此</span><span style="color: black;">咱们</span>先绘制几个小圆点，环绕着一个圆心。有点像loading的小圈圈。这其实<span style="color: black;">便是</span>烟花最<span style="color: black;">起始</span>的状态...<div style="color: black; text-align: left; margin-bottom: 10px;">
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/v2-db091c80e37a5f64cdc194e4728bd382_b.jpg" style="width: 50%; margin-bottom: 20px;"></div>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;">function mouseDownHandler(e) {
var x = e.clientX;
var y = e.clientY;
drawFireworks(x,y);
}
function drawFireworks(sx,sy) {
var count = 10;//烟花粒子数量
var radius = 10;//烟花环绕半径
for(var i = 0 ;i<count;i++){
var angle = 360/count*i;//烟花粒子角度
var radians = angle * Math.PI / 180;//烟花粒子弧</div>
我完全赞同你的观点，思考很有深度。 楼主节操掉了，还不快捡起来！
页:
[1]