您現在的位置是:電腦技術吧?>? 編程技術 ??>??一張張什么笑臉,她那張笑臉??>??正文詳情

一張張什么笑臉,她那張笑臉

文韶美2019-11-25 12:51:18 人圍觀
簡介每一張笑臉都是今天,您將了解名為canvas的web技術及其與文檔對象模型(通常稱為dom)的關聯。這項技術非常強大,因為它使web開發人員能夠使用JavaScript訪問和看到一張張笑臉

今天,你將 學習一項稱為Canvas(畫布)的web技術,以及它和文檔對象模型(通常被稱為DOM)的關聯。

這項技術非常強大,因為它使web開發人員能夠通過使用JavaScript訪問和修改HTML元素。

現在你可能想知道為什么我們需要大刀闊斧地使用JavaScript。

簡而言之,HTML和JavaScript是相互依存的,一些HTML組件,如canvas元素,并不能脫離JavaScript單獨使用。

畢竟,如果我們不能在上面繪圖,那canvas能派什么用處呢?

為了更好地理解這個概念,我們一起通過一個示例項目來嘗試畫一個簡單的笑臉。

讓我們開始吧。

開始 首先創建一個新目錄來保存你的項目文件,然后打開你最喜歡的文本編輯器或web開發工具。

一旦你這樣做了,你應該創建一個空的index.html和一個空的script.js,之后我們將繼續編輯。

接下來,我們來修改index.html文件,這不會涉及很多東西,因為我們項目的大部分代碼將用JavaScript編寫。

我們需要在HTML中做的是創建一個canvas元素和引用script.js,這相當直截了當:XML/HTML Code復制內容到剪貼板

    !DOCTYPE htmlbody canvas id='canvas' width='640' height='480'/canvas script type='text/javascript' src='script.js'/script /body/html
這么解釋,我使用一組標記 html 和 body,這樣,我們可以通過body為文檔添加更多的元素。

抓住這個機會,我完成了一個id屬性為canvas的640*480的canvas元素。

這個屬性只是簡單地為元素加上一個字符串,目的是為了唯一識別,稍后我們將利用這個屬性,在JavaScript文件中定位我們的canvas元素。

接下來,我們再使用script標記引用JavaScript文件,它指定JavaScript的語言類型和script.js文件的路徑。

操作DOM 如其名稱文檔對象模型,我們需要通過使用另一種語言,調用接口訪問HTML文檔,在這里,我們使用的語言是JavaScript。

為此,我們需要在內置文檔對象上的布置一個簡單引用。

這個對象直接對應于我們的 html 標記,類似的,它是整個項目的基礎,因為我們可以通過它來獲取元素,執行變化。

XML/HTML Code復制內容到剪貼板

    var canvas = document.getElementById('canvas');
還記得我們如何使用id =canvas來定義一個canvas元素嗎?

現在我們使用document.getElementById方法,從HTML文檔獲取這個元素,我們簡單地傳遞匹配所需元素id的字符串。

現在我們已經獲取了這個元素,接下來就可以用其進行繪畫工作了。

為了使用canvas進行繪畫,我們必須操作它的上下文。

令人驚訝的是,一個canvas不包含任何繪圖的方法或屬性,但是它的上下文對象有我們需要的所有方法。

一個上下文定義如下所示:XML/HTML Code復制內容到剪貼板

    var context = canvas.getContext('2d');
每一個canvas有幾個不同的上下文,根據程序的目的,只需要一個二維的上下文就足夠了,它將獲得我們需要創建笑臉的所有繪圖方法。

在我們開始之前,我必須告知您,上下文存儲了兩種顏色屬性,一個用于畫筆(stroke),一個用于填充(fill)。

對于我們的笑臉,需要設置填充為黃色,畫筆為黑色。

XML/HTML Code復制內容到剪貼板

    context.fillStyle = 'yellow'; context.strokeStyle = 'black';
設置完上下文所需的顏色后,我們必須為臉畫一個圓。

不幸的是,上下文中沒有圓的預定義方法,因此我們需要使用所謂的路徑(path)。

路徑只是一系列的相連的直線和曲線,路徑在繪圖完成后關閉。

XML/HTML Code復制內容到剪貼板

    context.beginPath(); context.arc(320, 240, 200, 0, 2 * Math.PI); context.fill(); context.stroke(); context.closePath();
這樣解釋,我們運用上下文開始一個新的路徑。

接下來,我們在點(320、240)上創建一個半徑為200像素的圓弧。

最后兩個參數指定構建圓弧的初始和最終角度,所以我們傳遞0和2 *Math.PI,來創建一個完整的圓。

最后,我們運用上下文基于我們已經設置的顏色進行填充并畫出路徑。

盡管關閉路徑不是腳本的功能所必須的,但我們還是需要關閉路徑,這樣就可以開始繪制笑臉中新的眼睛和嘴。

眼睛可以通過同樣的方式完成,每個眼睛需要較小的半徑和不同的位置。

但首先我們必須記住設置填充顏色為白色。

XML/HTML Code復制內容到剪貼板

    context.fillStyle = 'white'; context.beginPath(); context.arc(270, 175, 30, 0, 2 * Math.PI); context.fill(); context.stroke(); context.closePath(); context.beginPath(); context.arc(370, 175, 30, 0, 2 * Math.PI); context.fill(); context.stroke(); context.closePath();
以上是關于眼睛的所有代碼。

現在嘴巴很相似,但這次我們不會填滿圓弧,我們的角度將配置為一個半圓。

要做到這一點,我們需要設置起始角度為零和結束角度為-1 * Math.PI。

請記住,不要忘記將畫筆的顏色設置為紅色。

XML/HTML Code復制內容到剪貼板

    context.fillStyle = 'red'; context.beginPath(); context.arc(320, 240, 150, 0, -1 * Math.PI); context.fill() context.stroke(); context.closePath();
祝賀 干的不錯。

你已經完成了本教程,你做了一個很棒的笑臉,同時學習了更多關于Canvas、HTML、JavaScript,和文檔對象模型的知識。

如果你有任何問題,請留言 注:更多精彩教程請關注電腦高手圖文教程 頻道,

版權聲明:本文由 文韶美 整理編輯。

原標題:張笑臉,一張張笑臉像什么

轉載注明出處:http://www.dn9ww09s.icu/program/14316.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 摩拜單車不鎖會怎么樣,摩拜單車鎖不了怎么辦

    摩拜單車不鎖會怎么樣,摩拜單車鎖不了怎么辦 相關圖片怎么關摩拜單車的鎖摩比自行車已經成為許多人旅行的必要選擇。但當一些孩子使用安卓版摩比自行車時,他們發現掃描后無法解鎖。怎么了?怎么解決?讓我們看看解決方案摩拜單車...

  • 顯示桌面按鈕,桌面設置

    顯示桌面按鈕,桌面設置 相關圖片桌面不顯示圖標怎么辦我敢肯定很多孩子不知道,他們不使用電腦的時候可以把電腦設成睡眠模式。如果他們再開始的話會很快。然而,在win7系統中,sleep按鈕和shutdown按鈕一起使桌面上...

  • flash簡單實例教程,flash的教程

    flash簡單實例教程,flash的教程 相關圖片flash新手教程實例表明,水中的浮詞與水中的浮詞相似,隨波浪起伏,主要利用了掩模效應和文本透明度的變化。步驟1:啟動Flash MX,創建一個新文件,右鍵單擊該階段的空白區域并自己...

  • 神州u 司機端,神州專車u十司機

    神州u 司機端,神州專車u十司機 相關圖片神州專車u十作為神舟特種車的官方開發,一款永遠不會被提取的關鍵軟件,只要司機加入,每月就可以輕松進入一萬多個。那么加入神舟U 車手的條件是什么?接下來,超人軟件編輯將...

  • 2份PDF合并,合并pdf文件最簡單的方法

    2份PDF合并,合并pdf文件最簡單的方法 相關圖片多個pdf如何合并在正常生活中,許多小伙伴遇到了這樣的情況,他們需要將兩個PDF文件合并在一起。那么如何將PDF文件合并成PDF呢?接下來,超人軟件編輯器將介紹如何合并PDF文件如何...

  • web消息通知,web通知session更新

    web消息通知,web通知session更新 相關圖片html通知代碼使用網絡版Gmail時,每當收到新郵件時,屏幕右下角會彈出一個提示框。有了HTML5提供的通知API,我們也可以輕松實現這樣的功能,確保瀏覽器支持如果你是在特定ad認證通知...

  • VUE如何添加音樂,vue不能添加音樂

    VUE如何添加音樂,vue不能添加音樂 相關圖片vue音樂怎么添加一部分近年來,Vue因其使用小型軟件制作視頻大片的優勢而越來越受歡迎。然而,有許多朋友不知道如何添加音樂到Vue。然后,超人軟件將向您介紹Vue iPhonevue如何添加第...

  • 規則,升級規則

    規則,升級規則 相關圖片大師規則4CSS規則由選擇器和聲明組成。本文將討論第二部分:聲明聲明聲明由兩部分組成:properties和values屬性指示要影響元素的哪個方面(顏色、高度等),而v象棋的規則口訣...

  • 作業互助組,作業互助組官網

    作業互助組,作業互助組官網 相關圖片作業互助組網頁版家庭作業小組是一個非常實用的閱讀和學習軟件。在這個軟件中,用戶可以在網上找到家庭作業的答案,并且對解決問題有一個非常清晰的想法。不過,一些合作伙伴...

  • map標簽,resultmap標簽

    map標簽,resultmap標簽 相關圖片image map“映射”選項卡定義客戶端圖像映射。圖像映射是指可單擊區域區域元素總是嵌套在映射元素中的圖像。area元素定義圖像映射中的區域IMG標記中的usemap屬性引用映map什么意...

熱評文章

  • q 友樂園,q友樂園說說

    q 友樂園,q友樂園說說 相關圖片q友樂園簽名熱門Q-friend park是一個個性化平臺,用戶可以共享QQ個人簽名、QQ頭像、QQ網名、QQ群等資源。用戶可以在q-friend Park中分享自己喜愛的QQq友樂園網名熱門...

  • 公司轉發朋友圈制度,朋友圈轉發工作內容

    公司轉發朋友圈制度,朋友圈轉發工作內容 相關圖片轉發朋友圈作為考核的標準為了增加主持人和粉絲之間有趣的互動,英科推出了與微博故事相同的功能。據悉,該功能為24小時系統功能。用戶上傳的短視頻將在24小時后。我不知道。快...

  • 響應式的,什么是響應式

    響應式的,什么是響應式 相關圖片網頁響應式此菜單可以左對齊、居中對齊和右對齊,這與上一篇文章中提到的菜單不同,后者需要通過單擊在“顯示”和“隱藏”之間切換。它還有一個顯示活動/當前菜單項的標簽,它...

  • 無線ap不穩定掉線,無線網不穩定老是掉線

    無線ap不穩定掉線,無線網不穩定老是掉線 相關圖片wifi經常掉線現在筆記本電腦可以說是每人一臺,不僅因為它的功能和臺式電腦一樣,還因為它便于攜帶。但是無線網絡比網線更不穩定,所以有時筆記本電腦網絡不如臺式電腦穩定。當...

  • 圖片處理方法,圖片處理技巧

    圖片處理方法,圖片處理技巧 相關圖片ps處理圖片的基本方法對于網頁制作者來說,最麻煩的事情可能是在網頁上添加圖片或文本的鏈接。如果頁面內容很多,那么作品只能用恐怖來形容。現在讓我們先學習如何在Dreamweaver中...

  • nsa 武器庫免疫,nsa武器庫免疫工具下載

    nsa 武器庫免疫,nsa武器庫免疫工具下載 相關圖片nsa裝備庫永恒藍是一種比蠕蟲病毒更具攻擊性的計算機病毒。一些用戶仍然害怕蠕蟲病毒。如何防止更強大的永恒藍色?NSA武器庫免疫工具是360對永恒藍色病毒的免疫殺滅工具,刪除n...

  • 晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠

    晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠 相關圖片晶瑩剔透的水珠像什么本教程主要使用焰火來創建水晶般清晰的效果。讓我們學習以下內容。首先,看看最終效果圖:第一步是隨意創建一個新的畫布,填充背景色為﹐000066,畫出鋼筆...

  • 王者榮耀隱藏戰績破解2019,安卓怎么看ios好友戰績

    王者榮耀隱藏戰績破解2019,安卓怎么看ios好友戰績 相關圖片王者榮耀助手在哪下載如今,年輕人業余時間最喜歡的事情就是吸引朋友,開黑車。不過,如果他們不想和隊友一起開黑車,就應該先用國王的榮耀助手看看朋友們的成就。國王的榮耀...

  • python ip地址處理,python獲取ip地址

    python ip地址處理,python獲取ip地址 相關圖片python獲取內網ip地址本文主要介紹Python將IP地址轉換成整數的方法,包括Python對IP地址的轉換技巧。對于需要的朋友,請參考下面的示例來描述Python將IP地址轉換為整數python生成ip地址加...

  • 文理分科,文理學院

    文理分科,文理學院 相關圖片寶雞文理智能文理是一種閱讀和學習軟件。在這個軟件中,不僅學生可以得到一個專業的學習平臺,教師也可以得到一個教學平臺。那么如何運用智慧和藝術呢?接下來,超人軟件編輯...

關注微信

变脸官网查询