制圓和圓弧

HTML5 canvas arc() 方法

瀏覽器支持

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

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

定義和用法

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

提示：如需通過 arc() 來創建圓，請把起始角設置為 0，結束角設置為 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)
• 結束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)

JavaScript 語法：

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

參數值

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

示例

繪制矩形

HTML5 canvas rect() 方法

瀏覽器支持

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

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

定義和用法

rect() 方法創建矩形。

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

JavaScript 語法：

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

參數值

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

實例１

實例２

繪制“被填充”的矩形

HTML5 canvas fillRect() 方法

繪制矩形（無填充）

HTML5 canvas strokeRect() 方法

在給定的矩形內清除指定的像素

HTML5 canvas clearRect() 方法

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

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

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

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

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