Canvas放置反彈效果隨機圖形

来源:http://www.cnblogs.com/leitong/archive/2017/08/16/7374398.html
-Advertisement-
Play Games

1 var raf; 2 var arror = []; 3 var running = false; 4 //繪製圓形 5 function createBall() { 6 return { 7 x: 0, 8 y: 0, 9 vx: 10-Mat... ...


  1    var raf;
  2    var arror = [];
  3    var running = false;
  4    //繪製圓形
  5    function createBall() {
  6        return {
  7            x: 0,
  8            y: 0,
  9            vx: 10-Math.random()*10,
 10            vy: 10-Math.random()*10,
 11            radius: 25,
 12            color:"red",
 13            draw: function() {
 14                ctx.beginPath();
 15                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
 16                ctx.closePath();
 17                ctx.fillStyle = this.color;
 18                ctx.fill();
 19            }
 20        }
 21    }
 22    //繪製正方形
 23    function createSquare() {
 24        return {
 25            x: 0,
 26            y: 0,
 27            vx: 10-Math.random()*10,
 28            vy: 10-Math.random()*10,
 29            color:"red",
 30            draw: function() {
 31                ctx.beginPath();
 32                ctx.fillStyle = this.color;
 33                ctx.fillRect(this.x, this.y,30, 30);
 34                ctx.closePath();
 35            }
 36        }
 37    }
 38    //繪製五角星
 39    function createStar() {
 40        return {
 41            x: 0,
 42            y: 0,
 43            vx: 10-Math.random()*10,
 44            vy: 10-Math.random()*10,
 45            color:"red",
 46            draw: function() {
 47                ctx.font = "24px serif";
 48                ctx.textBaseline = "hanging";
 49                ctx.fillStyle=this.color;
 50                ctx.fillText("五角星",this.x, this.y);
 51 
 52            }
 53        }
 54    }
 55    //繪製三角形
 56    function createTriangle() {
 57        return {
 58            x: 0,
 59            y: 0,
 60            vx: 10-Math.random()*10,
 61            vy: 10-Math.random()*10,
 62            color:"red",
 63            draw: function() {
 64                ctx.beginPath();
 65                ctx.moveTo(this.x,this.y);
 66                ctx.lineTo(this.x+25,this.y+25);
 67                ctx.lineTo(this.x+25,this.y-25);
 68                ctx.fillStyle=this.color;
 69                ctx.fill();
 70            }
 71        }
 72    }
 73    //清除
 74    function clear() {
 75        ctx.fillStyle = 'rgba(255,255,255,0.3)';
 76        ctx.fillRect(0,0,canvas.width,canvas.height);
 77    }
    //判斷圖形坐標是否超出畫布範圍
78 function draw() { 79 clear(); 80 arror.forEach(function(ball, i){ 81 ball.draw(); 82 ball.x += ball.vx; 83 ball.y += ball.vy; 84 if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { 85 ball.vy = -ball.vy; 86 } 87 if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { 88 ball.vx = -ball.vx; 89 } 90 }); 91 92 raf = window.requestAnimationFrame(draw); 93 } 94 canvas.addEventListener('click',function(e){ 95 if (!running) { 96 raf = window.requestAnimationFrame(draw); 97 running = true; 98 } 99 var colorarr=["#000000","#7F7F7F","#880015","#ED1C24","#FF7F27","#FFF200","#22B14C","#00A2E8","#3F48CC","#A349A4","#B97A57","#FFAEC9","#B5E61D"]; 100 var Graphics = ["Round","Square","Star","Triangle"]; 101 var typexz=Graphics[Math.floor(Math.random()*4)]; 102 var ball; 103 switch(typexz){ 104 case "Round": 105 ball = createBall(); 106 break; 107 case "Square": 108 ball = createSquare(); 109 break; 110 case "Star": 111 ball = createStar(); 112 break; 113 case "Triangle": 114 ball = createTriangle(); 115 break; 116 } 117 ball.x = e.clientX; 118 ball.y = e.clientY; 119 ball.color = colorarr[Math.floor(Math.random() * 10 + 3)]; 120 arror.push(ball); 121 }); 122 draw(); 123 document.addEventListener('keydown',function (e) { 124 if(e.keyCode==32){ 125 event.preventDefault(); 126 window.cancelAnimationFrame(raf); 127 running = false; 128 } 129 })

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 何為Curry化/柯里化? curry化來源與數學家 Haskell Curry的名字 (編程語言 Haskell也是以他的名字命名)。 柯里化通常也稱部分求值,其含義是給函數分步傳遞參數,每次傳遞參數後部分應用參數,並返回一個更具體的函數接受剩下的參數,這中間可嵌套多層這樣的接受部分參數函數,直至 ...
  • 迭代器是指通過一種形式依次遍曆數組,對象,或者類數組結構中的每個元素. 常見的有jquery中的each方法, ES5自帶的forEach方法. 下麵我們就來自定義一個類似jquery或者ES5的迭代器方法 輸出結果: ["zhangsan", "lisi", "ghostwu"] "zhangsa ...
  • 所用move.js ...
  • 百度一下,自己也想了一下,有一種簡單,無腦的方式分享給你: <input ng-model="start" id="start" placeholder="開始日期" style="width:156px;" class="form-control date-picker" data-date-fo ...
  • Java對cookie的操作 package cn.utils; import java.util.HashMap; import java.util.Map; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServl ...
  • jQuery知識重構 目錄: 一、入口函數 1 $(document).ready(function(){}); 2 $(function(){}); jQuery入口函數與js入口函數的區別: jQuery的入口函數是在 html所有標簽都載入之後,就會去執行。 Js的window.onload事 ...
  • 通過增刪選擇符熟練各個選擇符的用法:(註:筆者FF瀏覽器在源碼上註釋一部分內容後並不能改變運行後的輸出結果,必須刪除要註釋的內容才行) <!DOCTYPE html><html> <head> <style type="text/css"> section>h1 {font-style:italic ...
  • 前言: 哈哈,發現我寫的隨筆都是項目驅使的。當然,這篇也是項目驅使的咯,前段時間領導在玩微信時候發現了微信小程式的好處,流程,切換速度快等,然後就讓小弟研究研究小程式的實現。 補充下,博客大多都是處理項目上遇到的一些問題,而本人的GitHub則比較傾向於新知識點的搜集和運用,在此,補充上我的GitH ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...