欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Canvas放置反彈效果隨機圖形(實例)

 更新時間:2017年08月17日 09:19:15   投稿:jingxian  
下面小編就為大家?guī)硪黄狢anvas放置反彈效果隨機圖形(實例)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

Canvas放置反彈效果隨機圖形(實例)

var raf;
  var arror = [];
  var running = false;
  //繪制圓形
  function createBall() {
    return {
      x: 0,
      y: 0,
      vx: 10-Math.random()*10,
      vy: 10-Math.random()*10,
      radius: 25,
      color:"red",
      draw: function() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fillStyle = this.color;
        ctx.fill();
      }
    }
  }
  //繪制正方形
  function createSquare() {
    return {
      x: 0,
      y: 0,
      vx: 10-Math.random()*10,
      vy: 10-Math.random()*10,
      color:"red",
      draw: function() {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y,30, 30);
        ctx.closePath();
      }
    }
  }
  //繪制五角星
  function createStar() {
    return {
      x: 0,
      y: 0,
      vx: 10-Math.random()*10,
      vy: 10-Math.random()*10,
      color:"red",
      draw: function() {
        ctx.font = "24px serif";
        ctx.textBaseline = "hanging";
        ctx.fillStyle=this.color;
        ctx.fillText("五角星",this.x, this.y);

      }
    }
  }
  //繪制三角形
  function createTriangle() {
    return {
      x: 0,
      y: 0,
      vx: 10-Math.random()*10,
      vy: 10-Math.random()*10,
      color:"red",
      draw: function() {
        ctx.beginPath();
        ctx.moveTo(this.x,this.y);
        ctx.lineTo(this.x+25,this.y+25);
        ctx.lineTo(this.x+25,this.y-25);
        ctx.fillStyle=this.color;
        ctx.fill();
      }
    }
  }
  //清除
  function clear() {
    ctx.fillStyle = 'rgba(255,255,255,0.3)';
    ctx.fillRect(0,0,canvas.width,canvas.height);
  }
    //判斷圖形坐標是否超出畫布范圍
  function draw() {
    clear();
    arror.forEach(function(ball, i){
      ball.draw();
      ball.x += ball.vx;
      ball.y += ball.vy;
      if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
        ball.vy = -ball.vy;
      }
      if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
        ball.vx = -ball.vx;
      }
    });

    raf = window.requestAnimationFrame(draw);
  }
  canvas.addEventListener('click',function(e){
    if (!running) {
      raf = window.requestAnimationFrame(draw);
      running = true;
    }
    var colorarr=["#000000","#7F7F7F","#880015","#ED1C24","#FF7F27","#FFF200","#22B14C","#00A2E8","#3F48CC","#A349A4","#B97A57","#FFAEC9","#B5E61D"];
    var Graphics = ["Round","Square","Star","Triangle"];
    var typexz=Graphics[Math.floor(Math.random()*4)];
    var ball;
    switch(typexz){
      case "Round":
        ball = createBall();
        break;
      case "Square":
        ball = createSquare();
        break;
      case "Star":
        ball = createStar();
        break;
      case "Triangle":
        ball = createTriangle();
        break;
    }
    ball.x = e.clientX;
    ball.y = e.clientY;
    ball.color = colorarr[Math.floor(Math.random() * 10 + 3)];
    arror.push(ball);
  });
  draw();
 document.addEventListener('keydown',function (e) {
   if(e.keyCode==32){
     event.preventDefault();
     window.cancelAnimationFrame(raf);
     running = false;
   }
 })

以上這篇Canvas放置反彈效果隨機圖形(實例)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • jsonp跨域及實現(xiàn)百度首頁聯(lián)想功能的方法

    jsonp跨域及實現(xiàn)百度首頁聯(lián)想功能的方法

    這篇文章主要介紹了jsonp跨域及實現(xiàn)百度首頁聯(lián)想功能的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • js實現(xiàn)二級聯(lián)動簡單實例

    js實現(xiàn)二級聯(lián)動簡單實例

    這篇文章主要為大家詳細介紹了js實現(xiàn)二級聯(lián)動簡單實例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-01-01
  • 比較常見的javascript中定義函數(shù)的區(qū)別

    比較常見的javascript中定義函數(shù)的區(qū)別

    js定義函數(shù)有好多種,但是他們之間的區(qū)別,大家都了解嗎,接下來,小編通過本文給大家介紹比較常見的js中定義函數(shù)的區(qū)別,對本文感興趣的朋友一起看看吧
    2015-11-11
  • JS實現(xiàn)的A*尋路算法詳解

    JS實現(xiàn)的A*尋路算法詳解

    這篇文章主要介紹了JS實現(xiàn)的A*尋路算法,結(jié)合實例形式詳細分析了A*尋路算法的概念、原理、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下
    2018-12-12
  • Typescript中bind的使用方法及注意事項

    Typescript中bind的使用方法及注意事項

    在TypeScript(以及JavaScript)中,bind()是一個用于改變函數(shù)上下文的方法,下面這篇文章主要給大家介紹了關(guān)于Typescript中bind的使用方法及注意事項的相關(guān)資料,需要的朋友可以參考下
    2024-08-08
  • JavaScript實現(xiàn)手寫promise的示例代碼

    JavaScript實現(xiàn)手寫promise的示例代碼

    promise?作為前端開發(fā)中常用的函數(shù),解決了?js?處理異步時回調(diào)地獄的問題,大家應該也不陌生了,今天來學習一下?promise?的實現(xiàn)過程吧
    2023-04-04
  • 利用Javascript實現(xiàn)一套自定義事件機制

    利用Javascript實現(xiàn)一套自定義事件機制

    隨著web技術(shù)發(fā)展,使用JavaScript自定義對象愈發(fā)頻繁,讓自己創(chuàng)建的對象也有事件機制,通過事件對外通信,能夠極大提高開發(fā)效率。下面這篇文章主要給大家介紹了關(guān)于利用Javascript實現(xiàn)一套自定義事件機制的相關(guān)資料,需要的朋友可以參考下。
    2017-12-12
  • 前端 javascript 實現(xiàn)文件下載的示例

    前端 javascript 實現(xiàn)文件下載的示例

    這篇文章主要介紹了前端 javascript 實現(xiàn)文件下載的示例
    2020-11-11
  • JavaScript多級判定代碼優(yōu)化淺析

    JavaScript多級判定代碼優(yōu)化淺析

    這篇文章主要介紹了JavaScript多級判定代碼優(yōu)化,JavaScript用二元運算符和if拆分優(yōu)化多級判定結(jié)構(gòu),?用JavaScript邏輯運算符替換if-else結(jié)構(gòu)判定
    2023-02-02
  • Js實現(xiàn)動態(tài)添加刪除Table行示例

    Js實現(xiàn)動態(tài)添加刪除Table行示例

    這篇文章主要介紹了Js動態(tài)添加刪除Table行的具體實現(xiàn),需要的朋友可以參考下
    2014-04-04

最新評論