您現在的位置是:電腦技術吧?>? 基礎知識 ??>??代碼例子,g代碼實例??>??正文詳情

代碼例子,g代碼實例

都悅來2019-11-15 23:00:38 人圍觀
簡介代碼呈現:方法1:代碼如下:!DOCTYPE HTML htmlbody canvas id=mycanvas width=500 height=500yourbrhtml5基礎代碼實例

效果圖:

方法一:代碼如下:!DOCTYPE HTML html body canvas id=myCanvas width=500 height=500your browser does not support the canvas tag/canvas script type=text/javascript var deg = 0; var r = 30; var rl = 100; function drawTaiji() { var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var colorA = rgb(0, 0, 0); var colorB = red; var px =Math.sin(deg)*r; var py =Math.cos(deg)*r; context.clearRect(0, 0, 300, 300); context.beginPath(); context.fillStyle = colorA; context.arc(rl, rl, 60, 0.5 * Math.PI deg, 1.5 * Math.PI deg, true); context.closePath(); context.fill(); context.fillStyle = colorB; context.beginPath(); context.arc(rl, rl, 60, 1.5* Math.PI deg, 0.5 * Math.PI deg, true); context.closePath(); context.fill(); context.fillStyle = colorB; context.beginPath(); context.arc(rl px, rl-py, 30, 0.5 * Math.PI deg, 1.5 * Math.PI deg, true); context.closePath(); context.fill(); context.fillStyle = colorA; context.beginPath(); context.arc(rl-px, rl py, 30, 1.5 * Math.PI deg, 0.5 * Math.PI deg, true); context.closePath(); context.fill(); context.fillStyle = colorA; context.beginPath(); context.arc(rl px, rl-py, 8, 0, 2 * Math.PI, true); context.closePath(); context.fill(); context.fillStyle = colorB; context.beginPath(); context.arc(rl-px, rl py, 8, 0, 2 * Math.PI, true); context.closePath(); context.fill(); deg =0.1; } setInterval(drawTaiji, 100);/script /p p/body /html方法二:代碼如下:!DOCTYPE HTML html body canvas id=myCanvas width=500 height=500 your browser does not support the canvas tag /canvas script type=text/javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext(2d); var angle = 0; var count = 360; var clrA = '#000'; var clrB = 'red'; function taiji(x, y, radius, angle, wise) { angleangle = angle || 0; wisewise = wise ? 1 : -1; ctx.save(); ctx.translate(x, y); ctx.rotate(angle); ctx.fillStyle = clrA; ctx.beginPath(); ctx.arc(0, 0, radius, 0, Math.PI, true); ctx.fill(); ctx.beginPath(); ctx.fillStyle = clrB; ctx.arc(0, 0, radius, 0, Math.PI, false); ctx.fill(); ctx.fillStyle = clrB; ctx.beginPath(); ctx.arc(wise * -0.5 * radius, 0, radius / 2, 0, Math.PI * 2, true); ctx.fill(); ctx.beginPath(); ctx.fillStyle = clrA; ctx.arc(wise * 0.5 * radius, 0, radius / 2, 0, Math.PI * 2, false); ctx.arc(wise * -0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true); ctx.fill(); ctx.beginPath(); ctx.fillStyle = clrB; ctx.arc(wise * 0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true); ctx.fill(); ctx.restore(); } loop = setInterval(function () { beginTag = true; ctx.clearRect(0, 0, canvas.width, canvas.height); taiji(200, 200, 50, Math.PI * (angle / count) * 2, true); //taiji(350, 350, 50, Math.PI * ((count - angle) / count) * 2, false); angle = (angle 5) % count; }, 50); /script /p p/body /html

版權聲明:本文由 都悅來 整理編輯。

原標題:html實例代碼,php實例代碼

轉載注明出處:http://www.dn9ww09s.icu/basics/12642.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 光驅讀不出光盤怎么辦,外置光驅讀不出光盤

    光驅讀不出光盤怎么辦,外置光驅讀不出光盤 相關圖片電腦光驅讀不出dvd光盤CD-ROM驅動器是筆記本電腦的標準工具。許多臺式機也將配備CD-ROM驅動器,但許多人已經很長時間沒有聯系CD-ROM驅動器了。然而,一些大型游戲的運營商仍然win10光驅...

  • 升級win10,怎么升級win10

    升級win10,怎么升級win10 相關圖片win8.1Win10是微軟主操作系統的最新版本。有些新功能只能在win10上體驗,所以很多舊版本系統的用戶也開始想升級自己的系統。本文將與您分享win8.1升級win10bwin...

  • html音樂播放器代碼,html5音樂播放器源碼

    html音樂播放器代碼,html5音樂播放器源碼 相關圖片音樂播放器前端獲取htmlvideoelement和htmludioelement objects1//audio您可以直接通過new 2 media=newaudio(ht在線音樂播放器源碼...

  • 蘋果定位功能有什么用,怎樣使用蘋果手機定位功能

    蘋果定位功能有什么用,怎樣使用蘋果手機定位功能 相關圖片蘋果手機的定位功能沒有網絡能用嗎當iPhone用戶丟失手機或想定位自己的手機時,可以通過icloud使用蘋果的定位功能。不過,icloud只能定位蘋果設備的大致位置,使用蘋果定位并不十分...

  • 邊框圓角,圓角邊框怎么設置

    邊框圓角,圓角邊框怎么設置 相關圖片html圓角矩形邊框!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xps做圓角矩形邊框...

  • 怎么看window10的版本,surface pro怎么看幾代

    怎么看window10的版本,surface pro怎么看幾代 相關圖片win10歷史版本號當用戶想知道他們的win10系統是否是最新版本時,他們可以通過檢查版本號來判斷。有些用戶不知道如何查看win10。實際上,只要使用命令查看win10版本,就可以bios開機密...

  • 四個全面布局的意義,戰略布局的意義

    四個全面布局的意義,戰略布局的意義 相關圖片四個全面布局隨著Web2.0標準化設計理念的普及,國內許多大型門戶網站都采用了div CSS的方式,52css.com也成為學習CSS頁面布局技術的先鋒網站。從實際應用來看布局在銷售中的意義...

  • 2.4g和5g要不要合并,2.4g頻段怎么設置

    2.4g和5g要不要合并,2.4g頻段怎么設置 相關圖片雙頻路由器關閉5g快今天的無線WiFi,我們發現有的標著2.4G,有的標著5g,2.4G和5g WiFi是什么意思?他們之間有什么區別?有人認為5g肯定比2.4G好,其實這是錯誤的2.4g能跑滿100m嗎...

  • 紐約時報在線閱讀,如何閱讀紐約時報

    紐約時報在線閱讀,如何閱讀紐約時報 相關圖片《紐約時報》《紐約時報》有什么功能?在Firefox瀏覽器中打開《紐約時報》時,值得注意的是,此網站()提供了保存到計算機上供脫機使用的數據。從這句話很容易推斷這是一個離線...

  • office365激活碼,獲取office365激活碼

    office365激活碼,獲取office365激活碼 相關圖片office2016激活碼辦公軟件有多種,其中office365也有很多用戶。Office 365是一款訂閱式跨平臺辦公軟件,允許任何人使用任何設備隨時隨地創建和共享內容。想充分享受office365激活方法...

熱評文章

  • dfu模式和恢復模式哪個好,dfu刷機弊端

    dfu模式和恢復模式哪個好,dfu刷機弊端 相關圖片蘋果用itunes恢復系統DFU的全稱是設備固件升級,是iPhone固件的強制升級和降級模式。只有當用戶的iPhone無法打開,iTunes無法識別,或者用戶的iPhone被降級越獄時,蘋果11更新不了13.1...

  • 碎玻璃特效,照片玻璃碎片特效

    碎玻璃特效,照片玻璃碎片特效 相關圖片快手玻璃碎片特效今天我們將為您帶來一個由HTML5Canvas實現的圖像玻璃碎片效果。圖像以玻璃碎片的形式出現在界面上,然后玻璃破碎的效果似乎逐漸被報道。呈現如下:HTML代碼破碎玻...

  • kux格式播放器,哪個播放器支持kux格式

    kux格式播放器,哪個播放器支持kux格式 相關圖片支持kux播放器有些用戶看到Kux格式的文件時會感到奇怪。事實上,Kux格式是優酷獨有的視頻格式。如果用戶想打開Kux格式供魏健觀看,需要使用優酷播放器。Kux不是一種常見的視qlv格式...

  • applepay無法添加卡,apple pay怎么打開

    applepay無法添加卡,apple pay怎么打開 相關圖片未能設置apple pay蘋果支付是蘋果公司的一種快捷支付方式,給iPhone用戶帶來了極大的便利。但是,當用戶在Apple pay中添加卡時,無法添加。蘋果支付不能添加的卡是什么綁定apple pay卡無...

  • 交互文檔,交互文檔說明

    交互文檔,交互文檔說明 相關圖片sketch 交互文檔交互規范文檔是交互設計器輸出的重要組成部分,關系到設計方案能否最大限度地實現。新的互動人,大多會擔心如何編寫互動文檔。今天我們來談談這個話題,交互文檔...

  • 聯想 Z5 Pro,聯想Z5 Pro GT

    聯想 Z5 Pro,聯想Z5 Pro GT 相關圖片聯想手機怎么樣自vivo nex以來,真正的全屏手機層出不窮。本文與大家分享一款來自聯想的新機型:聯想Z5 pro采用了創新的滑蓋式全屏幕設計,實現了超級95.0聯想手機...

  • 值得關注的一件事,值得關注的博主

    值得關注的一件事,值得關注的博主 相關圖片ins有哪些值得關注的人如果設計趨勢只停留在色彩、交互效果和卡片界面的討論上,我們可能會在未來兩年內落后。今天,讓華僑設計總監斯佩爾與同學們一起探討五大影響人類生活方...

  • win鍵用不了,win鍵不能用怎么辦

    win鍵用不了,win鍵不能用怎么辦 相關圖片怎么禁用win鍵在電腦鍵盤上,有些按鍵位置很少被某些用戶使用,但其實它們的功能非常強大。例如,更著名的贏鍵。讓我們看看贏球的關鍵是什么?贏的鑰匙有什么用?是舊鍵盤上的...

  • 元素element,myelement元素

    元素element,myelement元素 相關圖片element是啥我很久沒有更新教程了。我最近很忙。今天,我想和大家分享一下如何使用pixate來產生使用單一元素來擴展轉換的效果效果。效果如下:實際上,這個效果在pixate中element是哪里...

  • 手機刷機是什么概念,手機系統卡刷是什么意思

    手機刷機是什么概念,手機系統卡刷是什么意思 相關圖片手機刷機需要提供什么對于喜歡手機的用戶來說,手機刷的概念是非常熟悉的,但是對于一些新朋友來說,刷的概念還是有點奇怪刷是一種改變手機操作系統的行為,相當于安裝了不同...

關注微信

变脸官网查询