亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript+canvas實(shí)現(xiàn)框內(nèi)跳動(dòng)小球

 更新時(shí)間：2022年04月12日 15:38:27   作者：麥兜:)  
這篇文章主要為大家詳細(xì)介紹了JavaScript+canvas實(shí)現(xiàn)框內(nèi)跳動(dòng)小球，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript+canvas實(shí)現(xiàn)框內(nèi)跳動(dòng)小球的具體代碼，供大家參考，具體內(nèi)容如下

效果如下:

思路:

1.制定畫(huà)布,確定好坐標(biāo)
2.繪制出圓形小球
3.給圓一個(gè)原始坐標(biāo),xy軸的速度
4.每20毫秒刷新一次,達(dá)到變化的目的
5.判斷邊緣

全部代碼及釋義如下:

<!DOCTYPE html>
<html lang="en">

<head>
? <meta charset="UTF-8">
? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? <title>Document</title>
</head>

<body>
? <canvas id="canvas" style="border:1px solid #aaa;display:block;margin: 50px auto;">
? ? 當(dāng)前瀏覽器不支持canvas,請(qǐng)更新瀏覽器或者升級(jí)瀏覽器后再試
? </canvas>

? <script>
? ? // x: 小球原始x坐標(biāo),y: 小球原始y坐標(biāo), r: 小球半徑, vx: x軸速度,vy: y軸的速度 (速度都以向量表示,所以可為負(fù)數(shù))
? ? var ball = { x: 512, y: 100, r: 20, vx: -8, vy: 8, color: '#005588' }
? ? window.onload = function () {
? ? ? var canvas = document.getElementById("canvas");

? ? ? // 制定canvas畫(huà)布的大小
? ? ? canvas.width = 860;
? ? ? canvas.height = 600;
? ? ? // 判斷瀏覽器是否支持canvas
? ? ? if (canvas.getContext("2d")) {
? ? ? ? // 下面所有調(diào)用的函數(shù)都是基于context這個(gè)上下文環(huán)境來(lái)進(jìn)行的
? ? ? ? var context = canvas.getContext("2d");

? ? ? ? setInterval(() => {
? ? ? ? ? render(context)
? ? ? ? ? update()
? ? ? ? }, 20);
? ? ? } else {
? ? ? ? alert("當(dāng)前瀏覽器不支持canvas,請(qǐng)更新瀏覽器或者升級(jí)瀏覽器后再試");
? ? ? }
? ? };
? ? //十六進(jìn)制顏色隨機(jī)
? ? function color16() {
? ? ? var r = Math.floor(Math.random() * 256);
? ? ? var g = Math.floor(Math.random() * 256);
? ? ? var b = Math.floor(Math.random() * 256);
? ? ? var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
? ? ? return color;
? ? }
? ? // 小球的坐標(biāo)的刷新
? ? function update() {
? ? ? ball.x += ball.vx // x軸坐標(biāo) vx是x軸的速度,勻速增加
? ? ? ball.y += ball.vy ?// y軸坐標(biāo) 由于g的原因,速度是勻變速
? ? ??
? ? ? // 觸底的條件
? ? ? if (ball.y >= canvas.height - ball.r) {
? ? ? ? ball.color = color16()
? ? ? ? ball.y = canvas.height - ball.r ? ?// 觸下底
? ? ? ? ball.vy = -ball.vy
? ? ? } else if (ball.x <= ball.r) {
? ? ? ? ball.color = color16()
? ? ? ? ball.x = ball.r // 觸左
? ? ? ? ball.vx = -ball.vx
? ? ? } else if (ball.x >= canvas.width - ball.r) {
? ? ? ? ball.color = color16()
? ? ? ? ball.x = canvas.width - ball.r ?// 觸右
? ? ? ? ball.vx = - ball.vx
? ? ? } else if (ball.y <= ball.r) {
? ? ? ? ball.color = color16()
? ? ? ? ball.y = ball.r ? // 觸上
? ? ? ? ball.vy = -ball.vy
? ? ? }
? ? }
? ? // 繪制圓形小球
? ? function render(cxt) {
? ? ? // 利用clearRect,清空畫(huà)布
? ? ? cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height)

? ? ? cxt.fillStyle = ball.color
? ? ? cxt.beginPath()
? ? ? //context.arc(圓心橫坐標(biāo), 原型縱坐標(biāo), 半徑的長(zhǎng)度,繪制的起點(diǎn), 繪制的終點(diǎn))
? ? ? cxt.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI)
? ? ? cxt.closePath()

? ? ? cxt.fill()
? ? }
? </script>
</body>

</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • javascript實(shí)現(xiàn)電腦和手機(jī)版樣式切換

    javascript實(shí)現(xiàn)電腦和手機(jī)版樣式切換

    這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)電腦和手機(jī)版樣式切換，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-11-11
  • JS操作XML實(shí)例總結(jié)(加載與解析XML文件、字符串)

    JS操作XML實(shí)例總結(jié)(加載與解析XML文件、字符串)

    這篇文章主要介紹了JS操作XML的方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript加載與解析XML文件及字符串的相關(guān)技巧,需要的朋友可以參考下
    2015-12-12
  • JavaScript 設(shè)計(jì)模式學(xué)習(xí) Factory

    JavaScript 設(shè)計(jì)模式學(xué)習(xí) Factory

    通過(guò)接口實(shí)現(xiàn)工廠，這是通過(guò)List方式顯示RSS 等實(shí)現(xiàn)代碼。
    2009-07-07
  • JavaScript Prototype對(duì)象

    JavaScript Prototype對(duì)象

    從JavaScript 1.1開(kāi)始，它就有了一個(gè)內(nèi)置對(duì)象叫Prototype。通過(guò)它，可以擴(kuò)展JavaScript，在對(duì)象上編寫(xiě)自定義的屬性和方法。
    2009-01-01
  • JavaScript 創(chuàng)建隨機(jī)數(shù)和隨機(jī)圖片

    JavaScript 創(chuàng)建隨機(jī)數(shù)和隨機(jī)圖片

    關(guān)于javascript隨機(jī)數(shù)的，很早以前的文章了，不過(guò)內(nèi)容還是不錯(cuò)的，如果想要更多的效果，可以去腳本之家搜下。
    2009-12-12
  • 在JS數(shù)組特定索引處指定位置插入元素

    在JS數(shù)組特定索引處指定位置插入元素

    最近我碰到了這樣一個(gè)需求: 將一個(gè)元素插入到現(xiàn)有數(shù)組的特定索引處，下面是具體的實(shí)現(xiàn)，需要的朋友不要錯(cuò)過(guò)
    2014-07-07
  • 淺析微信小程序自定義日歷組件及flex布局最后一行對(duì)齊問(wèn)題

    淺析微信小程序自定義日歷組件及flex布局最后一行對(duì)齊問(wèn)題

    這篇文章主要介紹了微信小程序自定義日歷組件及flex布局最后一行對(duì)齊問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-10-10
  • 關(guān)于圖片的預(yù)加載過(guò)程中隱藏未知的

    關(guān)于圖片的預(yù)加載過(guò)程中隱藏未知的

    相信大家都看到過(guò)ie下的內(nèi)存泄漏模式的文章，其中有一個(gè)模式就是循環(huán)引用，而閉包就有保存外部運(yùn)行環(huán)境的能力（依賴(lài)于作用域鏈的實(shí)現(xiàn)），所以img.onload這個(gè)函數(shù)內(nèi)部又保存了對(duì)img的引用，這樣就形成了循環(huán)引用，導(dǎo)致內(nèi)存泄漏
    2012-12-12
  • 微信小程序?qū)崿F(xiàn)提交input信息到后臺(tái)的方法示例

    微信小程序?qū)崿F(xiàn)提交input信息到后臺(tái)的方法示例

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)提交input信息到后臺(tái)的方法,結(jié)合實(shí)例形式分析了微信小程序提交input信息到后臺(tái)相關(guān)事件響應(yīng)與數(shù)據(jù)處理操作技巧,需要的朋友可以參考下
    2019-01-01
  • js刷新頁(yè)面location.reload()用法詳解

    js刷新頁(yè)面location.reload()用法詳解

    這篇文章主要介紹了js刷新頁(yè)面location.reload()用法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-12

最新評(píng)論