制圆和圆弧

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引领的信息技术新浪潮中，一专多能的前端开发人才是行业所需要的，千锋教育将不断吸纳企业新技术、在教学中总结经验，并不断把新技术和经验整合，对课程做出新一轮的升级，以培养符合时代发展和企业实际需求的实战型全能行前端开发工程师，助力更多新技术新交互形式更快地落地应用。