前端 - HTML5 canvas（三）

制圓和圓弧

HTML5 canvas arc() 方法

瀏覽器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。

注釋：Internet Explorer 8 或更早的瀏覽器不支持 <canvas> 元素。

定義和用法

arc() 方法創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）。

提示：如需通過 arc() 來創(chuàng)建圓，請把起始角設置為 0，結(jié)束角設置為 2*Math.PI。

提示：請使用 stroke() 或 fill() 方法在畫布上繪制實際的弧。

中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
起始角：arc(100,75,50,0,1.5*Math.PI)
結(jié)束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)

JavaScript 語法：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

參數(shù)值

參數(shù)描述x圓的中心的 x 坐標。y圓的中心的 y 坐標。r圓的半徑。sAngle起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）。eAngle結(jié)束角，以弧度計。counterclockwise可選。規(guī)定應該逆時針還是順時針繪圖。False=順時針，true=逆時針。

示例

繪制矩形

HTML5 canvas rect() 方法

瀏覽器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 rect() 方法。

注釋：Internet Explorer 8 或更早的瀏覽器不支持 <canvas> 元素。

定義和用法

rect() 方法創(chuàng)建矩形。

提示：請使用 stroke() 或 fill() 方法在畫布上實際地繪制矩形。

JavaScript 語法：

context.rect(x,y,width,height);

參數(shù)值

參數(shù)描述x矩形左上角的 x 坐標y矩形左上角的 y 坐標width矩形的寬度，以像素計height矩形的高度，以像素計

實例１

實例２

繪制“被填充”的矩形

HTML5 canvas fillRect() 方法

繪制矩形（無填充）

HTML5 canvas strokeRect() 方法

在給定的矩形內(nèi)清除指定的像素

HTML5 canvas clearRect() 方法

隨著萬物互聯(lián)的腳步加快，越來越多新交互場景、新交互形式出現(xiàn)，將會帶來大量的前端開發(fā)需求，同時也給前端開發(fā)者帶來了前所未有的挑戰(zhàn)。工業(yè)和信息化部教育與考試中心根據(jù)國家政策以及行業(yè)發(fā)展，在教育部的指導下編寫了《Web前端開發(fā)職業(yè)技能等級標準》。當前端開發(fā)等級化，前端從業(yè)者應該如何自我提升?千鋒重慶HTML5大前端的老師為你進行詳細分析。

　　第一，獲取相關(guān)信息。零基礎的同學可以通過瀏覽招聘信息或者詢問身邊從事前端工作的朋友來對HTML5大前端以及前端開發(fā)的工作內(nèi)容進行一個初步了解。一般來說，前端開發(fā)工程師的工作包括：使用HTML、CSS、JavaScript等專業(yè)技術(shù)和工具將UI設計稿實現(xiàn)為用戶PC端、移動端網(wǎng)頁等網(wǎng)站產(chǎn)品，同時處理相關(guān)端口的視覺和交互問題等。

　　第二，打好學習基礎很重要。Web前端入門學習的基礎內(nèi)容有HTML5和CSS3，其中包括PC端網(wǎng)站布局、Weapon頁面布局兩方面。JS交互設計是重點學習部分，這部分需要熟練掌握JavaScript基礎語法、JavaScript進階、JavaScript高級編程、Conquer經(jīng)典案例等內(nèi)容。再有前端框架也是重點知識點，現(xiàn)在比較主流的框架有Cue、React、Angular，熟練運用框架可以提升開發(fā)效率。

　　第三，理論結(jié)合實踐。緊跟潮流發(fā)展也很關(guān)鍵，現(xiàn)在微信小程序和小游戲越來越流行，掌握相關(guān)技術(shù)點可以在崗位競爭中更具優(yōu)勢。比如熟悉React Native技術(shù)對于小程序開發(fā)很有必要，它可以實現(xiàn)熟練開發(fā)出匹配項目需求的功能。

　最后，找對適合自己的學習方式至關(guān)重要。零基礎的同學如果自制力不是特別強，建議報一個培訓班，可以進行系統(tǒng)、全面、深度的學習。千鋒教育在特殊時期開啟了逆戰(zhàn)班線上課程，相比自學，逆戰(zhàn)班課程在課程安排、學習進度、教學模式等方面都具有很大的優(yōu)勢。在5G引領(lǐng)的信息技術(shù)新浪潮中，一專多能的前端開發(fā)人才是行業(yè)所需要的，千鋒教育將不斷吸納企業(yè)新技術(shù)、在教學中總結(jié)經(jīng)驗，并不斷把新技術(shù)和經(jīng)驗整合，對課程做出新一輪的升級，以培養(yǎng)符合時代發(fā)展和企業(yè)實際需求的實戰(zhàn)型全能行前端開發(fā)工程師，助力更多新技術(shù)新交互形式更快地落地應用。

多前端案例學習請?zhí)砑親TML5前端交流群111645711

為了讓照片大小統(tǒng)一，特意添加了自適應。讓導入圖片統(tǒng)一大小！

廢話不多說，上代碼

源碼：

更多前端案例學習請?zhí)砑親TML5前端交流群111645711

大家可以在評論區(qū)，可以在群內(nèi)找到每天更新的案例代碼！

謝謝大家的支持

在線咨詢

上一篇：零基礎學會表格技巧標題合并居中常用技巧三秒解決數(shù)
下一篇：python基礎綜合案例數(shù)據(jù)可視化-折線圖可視化

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

前端 - HTML5 canvas（三）

HTML5 canvas arc() 方法

瀏覽器支持

定義和用法

JavaScript 語法：

參數(shù)值

HTML5 canvas rect() 方法

瀏覽器支持

定義和用法

JavaScript 語法：

參數(shù)值

HTML5 canvas fillRect() 方法

HTML5 canvas strokeRect() 方法

HTML5 canvas clearRect() 方法

源碼：

您的項目需求