ホームページ > 記事 > ウェブフロントエンド > とってもロマンチックな泡はじけるエフェクトをJavaScriptで実現_JavaScriptスキル
とってもロマンチックな泡はじけるエフェクトをJavaScriptで実現_JavaScriptスキル
- ringa_leeオリジナル
- 2018-05-14 16:12:411900ブラウズ
この記事の例では、ロマンチックなバブルがはじける特殊効果コードの JavaScript での実装について説明します。皆さんの参考に共有してください。詳細は次のとおりです。
実行中のエフェクトのスクリーンショットは次のとおりです。
具体的なコードは次のとおりです。
実装アイデア: HTML には CANVAS 要素が 1 つだけ必要で、キャンバスは Javascript で操作されます
1. キャンバスに背景画像を描画します
2.半径は 0 ～ 10px、x 座標は画面上の水平方向にランダム、y マークは画面の高さよりも大きい垂直方向の直線になります。
円形の背景色はランダム、つまりさまざまな色にすることができます。
タイマーを使用して y を制御します --
HTML をビルドします
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>5多个小球往上运动</title> <style> </style> </head> <body> <p id="d1"> <canvas id="canvas"></canvas> </p> </body> </html>
js コード
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
function Circle()
{
this.x=Math.random()*canvas.width;
this.y=canvas.height;
this.r=Math.random()*10;
//绘制圆形
this.paint=function()
{
context.beginPath();
context.arc(this.x,this.y,this.r,0,Math.PI*2);
context.fillStyle="white";
context.globalAlpha = 0.5;
context.fill();
}
//控制圆形移动
this.step=function()
{
this.y--;
}
}
var circles=[];
function createCircles()
{
var circle=new Circle();//??????
circles[circles.length]=circle;
}
function paintCircles(){
for(var i=0;i<circles.length;i++){
circles[i].paint();
}
}
function stepCircles()
{
for(var i=0;i<circles.length;i++){
circles[i].step();
}
}
var myimg=new Image();
myimg.src="images/demo-1.png";
var timer="";
setInterval(function(){
context.drawImage(myimg,0,0);
timer++;
if(timer%20==0)
{
createCircles();
}
paintCircles();
stepCircles();
},10);
</script>Web サイトにロマンチックな要素を追加する必要があります。これは、JavaScript を柔軟に使用してバブルを弾く効果を実現できることを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。