canvas製作小球碰撞效果（帶連線功能）

阿新 • • 發佈：2021-01-31

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * { 

            padding: 0;
            margin: 0;
        }
        #myCanvas {
            width: 100%;
            height: 100vh;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>

    <script>
        const canvas = 
 document.getElementById('myCanvas')
        canvas.setAttribute('width', document.body.clientWidth)
        canvas.setAttribute('height', document.body.clientHeight)
        const ctx = canvas.getContext('2d');
        let ballArr = []
        // 建立一個小球類
        class Ball {
            constructor(x, 
 y, r, color, maxWidth, maxHeight, minWidth, minHeight) {
                this.x = x; 
                this.y = y;
                this.color = color;
                this.r = r;
                this.maxWidth = maxWidth;
                this.maxHeight = maxHeight;
                this.minWidth = minWidth;
                this.minHeight = minHeight;
                this.dx = Math.random() * 10 - 5;
                this.dy = Math.random() * 10 - 5;
                this.index = ballArr.length
                ballArr.push(this)
            }


            render() {
                ctx.beginPath()
                ctx.fillStyle = this.color
                ctx.arc(this.x, this.y, this.r, 0, 2* Math.PI);
                ctx.fill()
            }

            update() {
                this.dx = this.x + this.dx <= minWidth  || this.x + this.dx >= maxWidth ? -this.dx : this.dx;
                this.dy = this.y + this.dy <= minHeight  || this.y + this.dy >= maxHeight ? -this.dy : this.dy;
                this.x += this.dx;
                this.y += this.dy;
                ctx.beginPath()
                ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
                ctx.fill()
            }

            drawLine() {
                let x = ballArr.findIndex( item => item == this)
                ballArr.forEach((item, index) => {
                    if(Math.abs(item.x - this.x) < 150 && Math.abs(item.y - this.y) < 150 && index > this.index) {
                        let lineDistance = Math.sqrt(Math.pow(item.x - this.x, 2) + Math.pow(item.x - this.x, 2))
                        let alpha = parseInt(lineDistance) / 150;
                        ctx.strokeStyle = `rgba(0, 0, 0, ${alpha})`
                        console.log(alpha)
                        ctx.beginPath();
                        ctx.moveTo(this.x, this.y)
                        ctx.lineTo(item.x, item.y)
                        ctx.closePath();
                        ctx.stroke();
                    }
                })
            }
        }

        const maxWidth = document.body.clientWidth;
        const maxHeight = document.body.clientHeight;
        const minWidth = 0;
        const minHeight = 0;
        for(let i = 0; i < 30; i++) {
            let x = parseInt(Math.random() *  maxWidth);
            let y = parseInt(Math.random() * maxHeight);
            new Ball(x, y, 10, 'grey', maxWidth, maxHeight, minWidth, minHeight)
        }
        setInterval(() => {
            ctx.clearRect(0, 0, maxWidth, maxHeight)
            
            ballArr.forEach(item => {
                item.render();
                item.update();
                item.drawLine();
            });
        }, 10)
        
    </script>
</body>
</html>```

canvas製作小球碰撞效果（帶連線功能）

技術標籤：html5canvas <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

使用ant design vue做一個選擇不同選項展示不同表格的小例子（帶篩選功能）

技術標籤：ant design vue小問題vue前端小問題vue 效果如下圖所示。通過點選左側的選項可以在右側的表格展示對應選項包含的資料。頁面程式碼如下：

javascript canvas檢測小球碰撞

本文例項為大家分享了javascript canvas實現檢測小球碰撞的具體程式碼，供大家參考，具體內容如下

js+canvas實現轉盤效果（兩個版本）

本文例項為大家分享了js+canvas實現轉盤效果的具體程式碼，供大家參考，具體內容如下

html+css3應用animation製作動畫效果（跳動的熊）

技術標籤：css3html html+css3應用animation製作動畫效果（跳動的熊）所需素材animationxhtml,css程式碼

C語言實現食堂就餐管理系統（帶連結串列）

本文例項為大家分享了C語言就餐管理系統的具體程式碼，供大家參考，具體內容如下

微信小程式實現錄製、試聽、上傳音訊功能（帶波形圖）

最近接到這樣一個需求，要求實現錄製、試聽、上傳音訊功能，選擇的是getBackgroundAudioManager,聲音錄製和播放波形圖是用css實現的，效果圖及詳細設計程式碼如下：

vue實現全屏滾動效果（非fullpage.js）

本文例項為大家分享了vue實現全屏滾動效果（的具體程式碼，供大家參考，具體內容如下

flutter-展開閉合效果（列表型式的）

ExpansionTile元件 ExpansionTile Widget就是一個可以展開閉合的元件，常用的屬性有如下幾個。

QML 介面切換的幾種方法（帶示例程式碼）

QML 開發客戶端應用，避不可免要進行介面切換，例如從登入介面跳轉到主介面。網上看了下多篇部落格，都比較簡陋不是很詳細，不太好進行參考，所以決定自己參考這些部落格，總結一下幾種介面切換的方法。

如何在WordPress中製作聯絡表單（3種方法）

本篇教程提供3個在WordPress中建立聯絡表單並記錄詢盤的方法：外掛Contact Form 7 + Flamingo，兩者都免費

基於51微控制器火災報警器設計智慧火災報警系統（水泵滅火功能）專案設計與製作

背景：以51微控制器為主控晶片，以DS18B20為溫度感測器，利用紅色led燈代表空調加熱，綠色led燈作為空調降溫的控制。lcd1602顯示溫度值。

Spring監聽器與proxool.xml（資料庫連線池）

>>> Spring監聽器 Spring3 下使用proxool做連線池的時候出現異常 ERROR 2010-07-06 12:27:10,328 [org.logicalcobwebs.proxool.ProxoolDriver] [Problem]org.logicalcobwebs.proxool.Pr

android 柱狀圖（帶動畫的）

import java.util.ArrayList; import android.content.Intent; import android.os.AsyncTask; import android.os.Bundle;

用C語言、系統IO實現檔案複製（帶進度條）

#include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd.h> #include <strings.h> #include <string.h> #in

c# 與java對應的 aes加密（帶向量的）

using System; using System.Security.Cryptography; using System.Text; public class AESUtil { /// <summary>

select實現下拉載入的效果（介面分頁）

為select增加onPopupScroll事件；見下示例； <Select suffixIcon={<Icon type=\"caret-down\" style={{ transform: \'scale(0.7)\' }} />}

從原始碼分析ContextLoaderListener的載入過程（帶時序圖）

寫在前面在工作中遇到一個問題，就是使用 SpringMVC自帶定時器時，發現了定時任務執行兩次的問題。雖然問題當是是解決了。但是卻給我留下來一個大大的疑問，為什麼這樣配置？

Qt OpenGL 旗幟效果（飄動的紋理）

這次教程中，我將教大家如何建立一個飄動的旗幟。我們所要建立的旗幟，說白了就是一個以正弦波方式運動的紋理對映影象。雖然不會很難，但效果確實很不錯，希望大家能喜歡。當然這次教程是基於第06課的，希望大家確保

基於淺層神經網路（全連線網路）的強化學習演算法（Reinforce）在訓練過程中出現梯度衰退（degenerate）的現象

首先給出一個程式碼地址： https://gitee.com/devilmaycry812839668/CartPole-PolicyNetwork 強化學習中的策略網路演算法。《TensorFlow實戰》一書中強化學習部分的策略網路演算法，模擬環境為gym的CartPole，本專案

canvas製作小球碰撞效果（帶連線功能）

相關推薦