JavaScript+html5 canvas繪制的圓弧蕩秋千效果完整實(shí)例
本文實(shí)例講述了JavaScript+html5 canvas繪制的圓弧蕩秋千效果。分享給大家供大家參考,具體如下:
運(yùn)行效果截圖如下:
具體代碼如下:
<!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { margin:50px; border:5px solid gray; box-shadow:0px 0px 5px 5px #494949; } </style> </head> <body> <canvas id="canvas" width="500px" height="500px"></canvas> </body> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var r_x = 250, r_y = 0; var offset_h = 250; var offset_w = 500; var count = 0; var mode = "up"; var temp = 0; var getRPoint = function(x, y) { var r = (Math.pow(x, 2) + Math.pow(y, 2)) / (2 * y); var point = { x: x, y: Math.abs(250 - (r - y)), r: r }; return point; }; function arc(attrs) { ctx.beginPath(); ctx.arc(attrs.x, attrs.y, attrs.r, attrs.startAngle || 0, attrs.endAngle || Math.PI); ctx.stroke(); } var interval = setInterval(function() { count++; switch(mode) { case "up": temp = count; ctx.clearRect(0, 0, 500, 500); if(count%18 == 0) { mode = "down"; return; } break; case "down": temp = 36 - count; ctx.clearRect(0, 0, 500, 500); if(count%36 == 0) { mode = "default"; return; } break; case "default": temp = count - 36; if(count%54 == 0) { mode = "up"; count = 0; return; } } arc(getRPoint(250, 250-8*temp)); }, 100); </script> </html>
更多關(guān)于js特效相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery動(dòng)畫與特效用法總結(jié)》及《jQuery常見經(jīng)典特效匯總》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
- JavaScript+html5 canvas實(shí)現(xiàn)本地截圖教程
- js+canvas繪制矩形的方法
- js+canvas簡單繪制圓圈的方法
- js+canvas繪制五角星的方法
- JavaScript+html5 canvas制作的圓中圓效果實(shí)例
- JavaScript+html5 canvas繪制的小人效果
- JavaScript+html5 canvas制作色彩斑斕的正方形效果
- JavaScript html5 canvas畫布中刪除一個(gè)塊區(qū)域的方法
- JavaScript+html5 canvas繪制繽紛多彩的三角形效果完整實(shí)例
- JavaScript+html5 canvas制作的百花齊放效果完整實(shí)例
- JavaScript+html5 canvas繪制漸變區(qū)域完整實(shí)例
- JavaScript+canvas實(shí)現(xiàn)七色板效果實(shí)例
相關(guān)文章
JavaScript Event學(xué)習(xí)第九章 鼠標(biāo)事件
鼠標(biāo)事件是到目前為止最重要的事件。在這一章我將介紹一些鼠標(biāo)事件的最常見的問題和技巧。2010-02-02Javascript 代碼也可以變得優(yōu)美的實(shí)現(xiàn)方法
Javascript 代碼也可以變得優(yōu)美的一些經(jīng)驗(yàn)小結(jié)。2009-06-06微信小程序?qū)崿F(xiàn)藍(lán)牙設(shè)備搜索及連接功能示例詳解
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)藍(lán)牙設(shè)備搜索及連接功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06js圖數(shù)據(jù)結(jié)構(gòu)處理 迪杰斯特拉算法代碼實(shí)例
這篇文章主要介紹了js圖數(shù)據(jù)結(jié)構(gòu)處理 迪杰斯特拉算法代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09connection reset by peer問題總結(jié)及解決方案
這篇文章主要介紹了connection reset by peer問題解決方案的相關(guān)資料,這里整理了一些常見問題,及如何解決,需要的朋友可以參考下2016-10-10JavaScript幾種數(shù)組去掉重復(fù)值的方法推薦
下面小編就為大家?guī)硪黄狫avaScript幾種數(shù)組去掉重復(fù)值的方法推薦。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看2016-04-04JS自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用(兩種場景)
在WEB程序開發(fā)中經(jīng)常會(huì)見到用倒計(jì)時(shí)限制用戶對表單的操作,希望用戶在規(guī)定的時(shí)間內(nèi)閱讀完協(xié)議信息才允許用戶繼續(xù)下一步操作,本文通過兩種場景分析js實(shí)現(xiàn)自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用,小伙伴快來學(xué)習(xí)吧2015-08-08