您現在的位置是:電腦技術吧?>? 故障問題 ??>??html繪制到canvas,html5canvas繪制效率??>??正文詳情

html繪制到canvas,html5canvas繪制效率

郟恬雅2019-11-18 01:40:33 人圍觀
簡介html2canvas行星變量名為mercury87.70×a69697×5c3e40 Venus 224.701.70×c4bbac×1f1315 earth 365.2422×7canvas html5

星球 變量名 公轉周期 光色 暗色 水星 Mercury 87.70 #a69697 #5c3e40 金星 Venus 224.701.70 #c4bbac #1f1315 地球 Earth 365.2422 #78b1e8 #050c12 火星 Mars 686.98 #cec9b6 #76422d 木星 Jupiter 4332.589 #c0a48e #322 土星 Saturn 10759.95 #f7f9e3 #5c4553 天王星 Uranus 30799.095 #a7e115 #19243a 海王星 Neptune 60152.95 #0661b2 #1E3b73 canvas id=canvas width=1000 height=1000 style=background-color: #000;/canvas代碼如下:var canvas=document.getElementById(canvas);var cxt=canvas.getContext(2d);function DrawTrack(){for(var i=0;i8;i ){cxt.beginPath();cxt.arc(500,500,(i 1)*50,0,360,false);cxt.closePath();cxt.strokeStyle=#fff;cxt.stroke();}}function DrawStart(x,y,radius,cycle,sColor,eColor){//畫出星球需要哪些屬性//星球的坐標點this.x=x;this.y=y;//星球的半徑this.radius=radius;//星球的顏色(開始色,結束色)this.sColor=sColor;this.eColor=eColor;//創建一個漸變色空對象this.color=null;this.time=0;//公共周期this.cycle=cycle;this.draw=function(){cxt.save();cxt.translate(500,500);//設置旋轉角度cxt.rotate(this.time*360/this.cycle*Math.PI/180);cxt.beginPath();cxt.arc(this.x,this.y,this.radius,0,360,false);cxt.closePath();this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);this.color.addColorStop(0,this.sColor);this.color.addColorStop(1,this.eColor);cxt.fillStyle=this.color;cxt.fill();cxt.restore();this.time =1;}}/p p function Sun(){//太陽1DrawStart.call(this,0,0,20,0,#f00,#f90);}function Mercury(){//水星2DrawStart.call(this,0,-50,10,87.70,#A69697,#5c3e40);}function Venus(){//金星3DrawStart.call(this,0,-100,10,224.71,#c4bbac,#1f1315);}function Earth(){//地球4DrawStart.call(this,0,-150,10,365.224,#78b1e8,#050c12);}function Mars(){//火星5DrawStart.call(this,0,-200,10,686.98,#cec9b6,#76422d);}function Jupiter(){//木星6DrawStart.call(this,0,-250,10,4332.589,#c0a48e,#322);}function Saturn(){//土星7DrawStart.call(this,0,-300,10,10759.5,#f7f9e3,#5c4533);}function Uranus(){//天王星8DrawStart.call(this,0,-350,10,30799.95,#a7e1e5,#19243a);}function Neptune(){//天王星9DrawStart.call(this,0,-400,10,60152.95,#0661b2,#1E3b73);}var s=new Sun();//1var m=new Mercury();//2var v=new Venus();//3var e=new Earth();//4var ma=new Mars();//5var j=new Jupiter();//6var sa=new Saturn();//7var ur=new Uranus();//8var ne=new Neptune();//9setInterval(function(){cxt.clearRect(0,0,1000,1000);DrawTrack();s.draw();m.draw();v.draw();e.draw();ma.draw();j.draw();sa.draw();ur.draw();ne.draw();},10);

版權聲明:本文由 郟恬雅 整理編輯。

原標題:html5 canvas繪圖,html canvas 繪圖

轉載注明出處:http://www.dn9ww09s.icu/fault/13350.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 360怎么開無痕瀏覽,360無痕瀏覽怎么取消

    360怎么開無痕瀏覽,360無痕瀏覽怎么取消 相關圖片360極速無痕瀏覽不想讓人們知道他們瀏覽了什么網頁,清除緩存和cookies太麻煩了。那么360無痕瀏覽就可以很好地滿足你的需求無痕瀏覽,又稱私密瀏覽模式和隱形窗口,指的是不留任...

  • web表單,表單大師

    web表單,表單大師 相關圖片css表單這篇文章是作者交上來的一本筆記。我和客戶關系管理系統打交道很久了。我每天都看到表格。如果形式有感覺,我想它不想再看到我了。此外,老板推薦了一本書“網頁形式設...

  • morphvoxpro怎么用,morphvox pro好用嗎

    morphvoxpro怎么用,morphvox pro好用嗎 相關圖片morphvox怎么用到游戲里想要通過改變聲音來欺騙朋友的用戶不應該錯過MorphVOX pro。Morphox Pro是一款非常有趣的語音轉換軟件,它可以幫助您使用QQ、YY、Skype或morphvox筆記本怎么用...

  • cs3怎么用,cs3

    cs3怎么用,cs3 相關圖片gcs3猴子效應演示:討論:http://www.missyuan.com/viewthread.php?TID=417576真實效果的關鍵是陰影。這里也使用了同樣的2cs3是什么...

  • 任務欄到右邊了怎么辦,任務欄在右邊怎么弄到下面

    任務欄到右邊了怎么辦,任務欄在右邊怎么弄到下面 相關圖片電腦任務欄跑到左邊了通常,電腦上的任務欄就在窗口的正下方,但有些用戶不小心操作,導致任務欄在右邊。如何解決這種情況?如果操作不當,導致任務欄位于左側,可以先將任務...

  • word跨頁表格怎么銜接,word表格斷開怎樣連上

    word跨頁表格怎么銜接,word表格斷開怎樣連上 相關圖片word表格斷頁了怎么辦我相信大家在使用word的過程中都遇到過跨頁斷字的情況。現在,如何連接單詞表跨頁斷開連接?現在,超人軟件將介紹如何連接單詞表跨頁斷開連接word怎么把打斷...

  • Down,唧唧Down

    Down,唧唧Down 相關圖片Sit down病毒名稱(中文):病毒別名:威脅級別:★★☆病毒類型:網頁病毒長度:影響系統:win9xwinnt病毒行為:網頁木馬會利用名為rundll64.exe的木馬文件Put down...

  • 手機12306怎么兌換車票,12306積分兌換比例

    手機12306怎么兌換車票,12306積分兌換比例 相關圖片12306怎么總積分兌換車票12306應用是鐵道部推出的官方軟件。因此,用戶可以通過購買門票并將其兌換為門票來獲得積分。如何兌換12306點的車票?現在,超人軟件將帶給你123分12306上積分...

  • 無效,無效鏈接怎么解決

    無效,無效鏈接怎么解決 相關圖片句柄無效怎么處理很多朋友在使用deamweaver8時會遇到這樣的情況:他們將CSS文件鏈接到當前編輯的文檔,并將定義的CSS樣式應用到頁面元素,但在DW8中看不到任何效果。如mmi碼無效怎么解...

  • word段落間距太大,word2003行間距怎么調

    word段落間距太大,word2003行間距怎么調 相關圖片微型word行間距怎么調在word中,只有適當的行距才能使頁面看起來更舒適。所以你知道如何調整單詞的行距嗎?如果你不能調整單詞的行距,你能做什么?現在,超人軟件將為您介紹單詞...

熱評文章

  • 手機怎么看eml格式,eml是什么格式文件怎么打開

    手機怎么看eml格式,eml是什么格式文件怎么打開 相關圖片手機打不開eml文件最近,很多小伙伴都說他們在工作過程中收到了重要的EML文件,但是他們不知道EML是什么格式的?如何打開EML文件?然后,超人軟件會給你帶來EML文件的相關教程,蘋...

  • 副本不是正版有影響嗎,win7正版永久激活密鑰

    副本不是正版有影響嗎,win7正版永久激活密鑰 相關圖片win7盜版黑屏如何修復近日,不少小伙伴反映,安裝win7系統后,系統提示此windows拷貝不是正版。如果此windows副本不是正版,如何解決此問題?這個不是正版windows的拷內部版本7601有影響...

  • 水晶質感圖標,水晶之痕圖標

    水晶質感圖標,水晶之痕圖標 相關圖片寶石圖標效果圖:用路徑畫出這樣的圖形,然后用漸變復制一個,稍微偏移,如漸變用濾鏡和高亮:也用刀復制一個,用刀切一半,做筆:復制筆尖和筆桿之間的骨線,用刀切一半,然...

  • 安卓sync什么意思,radkfz是什么病毒

    安卓sync什么意思,radkfz是什么病毒 相關圖片locationemAndroid同步服務是Android系統的同步服務,可以同步通訊錄、電子郵件、日歷等設置。一些用戶對Android同步服務停止等錯誤感到困擾proxyhandler...

  • 如何設置自動換行,exel怎么設置自動換行

    如何設置自動換行,exel怎么設置自動換行 相關圖片自動換行在哪我沒想到Dreamweaver的菜單排放這么糟糕。經過兩天的搜索,我找到了這個選項。。。選中代碼視圖選項,自動換行上方的操作需要處于代碼源文件狀態怎樣自動換行...

  • 半透明頭像生成器,微信半透明頭像生成器

    半透明頭像生成器,微信半透明頭像生成器 相關圖片半透明頭像上傳軟件當你通過微信或QQ與朋友聊天時,你會發現一些朋友的頭像是半透明的,獨一無二的。那么,如何制作他們半透明的化身呢?如何制作半透明的化身?首先,半透明的...

  • 設計師容易嗎,設計師

    設計師容易嗎,設計師 相關圖片千圖設計師我見過這么多這樣的設計師,他們從來沒有想過“如果這樣交設計稿,工程師就做不出來”的問題,他們不愿意理解什么是“限制”和“規則”。如果你想從一個平面設計師...

  • 比鄰,比鄰現在叫什么

    比鄰,比鄰現在叫什么 相關圖片比鄰的意思比鄰是一款非常受到歡迎的即時通訊軟件,最近有不少朋友表示想取消關注舊好友,重新關注新朋友。那么比鄰怎么取消關注?比鄰怎么加好友?下面,就跟著超人軟件小編一起...

  • wifi會泄露上網記錄嗎,360家庭防火墻怎么開

    wifi會泄露上網記錄嗎,360家庭防火墻怎么開 相關圖片ensp防火墻配置實例最近,很多小伙伴都說,他們經常聽說電腦需要設置防火墻,但他們不知道防火墻有什么用?防火墻設置在哪里?下面,超人軟件小編將為您解答防火墻的相關內容,...

  • HTML 表格,html5 表格

    HTML 表格,html5 表格 相關圖片web文檔表格Style {font size: 12px}. Drag {font size: 12px; margin bottom: 5px;} TD {verticahtml建立表格...

關注微信

变脸官网查询