ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用して雨のエフェクトを実現する例の共有
ずっと雨のエフェクトを書きたいと思っていたんですが、時間的にも自分自身的にも本能的に避けていて、正面から向き合う勇気があまりなくて、このエフェクトさえ実現するのは難しいことではありません。育成の過程でさらなる強化が必要なようだ。 これは非常に単純な方法であり、コードは数行しかないため、このコードは主に canvas を使用して連続的にランダムに描画し、継続的な雨の視覚効果を形成します:
(function(){ var canvas = document.getElementById_x('canvas'); var ctx = canvas.getContext('2d'); var w = document.documentElement.offsetWidth; var h = document.documentElement.offsetHeight; var x = 0, y = 0,len = 200,angle = -2,count = 100; var rainTimer = null,drawTimer = null; //线条颜色 var color = ctx.createLinearGradient(0,0,0,len); color.addColorStop(0,'purple'); color.addColorStop(1,'rgba(255,255,255,0.2)'); //ctx.strokeStyle = 'rgba(255,255,255,0.2)'; ctx.strokeStyle = color; function drawRain(x,y) { //每次绘制渐变线条 都需要找到坐标 var color = ctx.createLinearGradient(x,y,x+angle,y+len); //color.addColorStop(0,'rgba(254,139,199,0.3)'); color.addColorStop(0,'rgba(0,0,0,0.1'); color.addColorStop(1,'rgba(255,255,255,0.2)'); ctx.strokeStyle = color; ctx.beginPath() ctx.moveTo(x,y); ctx.lineWidth=1; ctx.lineTo(x + angle,y+len); ctx.stroke(); } //绘制满屏的雨滴 function fullWindowRain() { var i = 0; for(i = 0;i < count; i++) { drawRain(w*Math.random(),h*Math.random()); } } //改变大雨或者小雨 function changeRain() { rainTimer = setInterval(function(){ count = Math.ceil(500 + 100 * Math.random()); },2000); } changeRain(); reDraw(); //重绘的频率 function reDraw() { drawTimer = setInterval(function(){ ctx.clearRect(0,0,w,h+200); fullWindowRain(); },100); } })();
注: グラデーション カラーの作成には座標値が必要であるため、描画するたびにグラデーション カラーを再度作成する必要があることに注意してください。
もちろん、通常の状況では、雨滴を制御するにはいくつかの変数を作成する必要があります 雨滴の角度、雨滴の長さ、雨滴の数など。
関連する推奨事項:
js で雨のエフェクトを使用するには?雨エフェクトの使用例をまとめます
雨エフェクトを実現するJavaScriptのグラフィックコードの詳細説明
Web画像上に雨エフェクトを作成するJavaScript_JavaScriptスキル
以上がJavaScript を使用して雨のエフェクトを実現する例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。