Canvas放置反彈效果隨機(jī)圖形(實(shí)例)
Canvas放置反彈效果隨機(jī)圖形(實(shí)例)
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); } //判斷圖形坐標(biāo)是否超出畫布范圍 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放置反彈效果隨機(jī)圖形(實(shí)例)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
jsonp跨域及實(shí)現(xiàn)百度首頁聯(lián)想功能的方法
這篇文章主要介紹了jsonp跨域及實(shí)現(xiàn)百度首頁聯(lián)想功能的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08js實(shí)現(xiàn)二級聯(lián)動(dòng)簡單實(shí)例
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)二級聯(lián)動(dòng)簡單實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01比較常見的javascript中定義函數(shù)的區(qū)別
js定義函數(shù)有好多種,但是他們之間的區(qū)別,大家都了解嗎,接下來,小編通過本文給大家介紹比較常見的js中定義函數(shù)的區(qū)別,對本文感興趣的朋友一起看看吧2015-11-11Typescript中bind的使用方法及注意事項(xiàng)
在TypeScript(以及JavaScript)中,bind()是一個(gè)用于改變函數(shù)上下文的方法,下面這篇文章主要給大家介紹了關(guān)于Typescript中bind的使用方法及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-08-08JavaScript實(shí)現(xiàn)手寫promise的示例代碼
promise?作為前端開發(fā)中常用的函數(shù),解決了?js?處理異步時(shí)回調(diào)地獄的問題,大家應(yīng)該也不陌生了,今天來學(xué)習(xí)一下?promise?的實(shí)現(xiàn)過程吧2023-04-04利用Javascript實(shí)現(xiàn)一套自定義事件機(jī)制
隨著web技術(shù)發(fā)展,使用JavaScript自定義對象愈發(fā)頻繁,讓自己創(chuàng)建的對象也有事件機(jī)制,通過事件對外通信,能夠極大提高開發(fā)效率。下面這篇文章主要給大家介紹了關(guān)于利用Javascript實(shí)現(xiàn)一套自定義事件機(jī)制的相關(guān)資料,需要的朋友可以參考下。2017-12-12前端 javascript 實(shí)現(xiàn)文件下載的示例
這篇文章主要介紹了前端 javascript 實(shí)現(xiàn)文件下載的示例2020-11-11Js實(shí)現(xiàn)動(dòng)態(tài)添加刪除Table行示例
這篇文章主要介紹了Js動(dòng)態(tài)添加刪除Table行的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04