canvas教程

HTML5中使用canvas绘制圆形

字号+ 作者:H5之家 来源:H5之家 2017-05-09 10:05 我要评论( )

点击上方“蓝字”关注本公众号 HTML5中使用canvas绘制圆形 ○ 下面我们就来看一下使用canvas如何绘制除矩形以为的其他图形,要想绘制其他图形,需要使用路径,同

HTML5中使用canvas绘制圆形

点击上方“蓝字”关注本公众号

HTML5中使用canvas绘制圆形

下面我们就来看一下使用canvas如何绘制除矩形以为的其他图形,要想绘制其他图形,需要使用路径,同样在绘制之前,先要获取图形上下文,然后在执行以下步骤:


1.开始.创建路径

使用图形上下文对象beginPath方法,使用如下:context.beginPath();

该方法没有参数,通过调用该方法开始创建路径。


2.创建图形的路径

需要使用图形上下文对象方法arc,使用如下:

context.arc(x,y,radius,startAngle,endAngle,anticlockwise);

该方法有6个参数,x为绘制圆形起点的横坐标,y为绘制圆形起点的纵坐标,radius为圆形的半径,startAngle为开始的角度,endAngle为结束的角度,anticlockwise为是否按顺时针方向进行绘制,这是一个布尔类型的参数,值为true时,表示按顺时针绘制。

3.路径创建完成后,关闭路径

使用图形上下文的closePath方法,使用如下:

context.closePath();

4.设定绘制样式,调用绘制方法,绘制路径

设置图形上下文context的fillStyle属性值,可以设置圆形的颜色。然后再调用fill方法。

context.fill();因为路径已经决定了图形的大小,所以这里就不需要在该方法中使用参数来指定图形的大小了。

运行的效果为:

Tag:

顶一下

(0)

0%

踩一下

(0)

0%

------分隔线----------------------------

  • 上一篇:链接到电话?短信?HTML5
  • 下一篇:没有了
  • 相关文章

  • 学堂 | 4小时掌握作品集排版要点,你需要的技巧都在这里!

    文章正文 ▼ - 关于讲师 - 茉莉 英国卡迪夫大学城市设计硕士,曾在卡迪夫大学任助教一职,VO设计联盟建筑规划作品集老师,曾帮助学生申请到AA,UCL,谢菲尔德等大学建筑

    05-08[Indesign]

  • 汉字造型艺术!在平面设计中的应用

    文/韩文君 图/Google 汉字作为一种语言文字而存在,却又独立地成为卓绝的视觉造型艺术形式。平面设计师应当充分利用汉字得天独厚的装饰优势,将汉字的装饰美感巧妙地应用在

    05-08[平面其它]

  • 平面构成之点睛的张力...

    点的魅力有多大? 我们在做LOGO,做海报,做网站,做包装... 都可以把小小的一个点发挥到极致! 图:logo设计视觉 案例 (LOGO利用了多个点,汇聚成一个星形,与品牌名呼应)

    05-08[平面其它]

  • 平面设计与UI设计有什么区别?

    平面设计师和UI设计师有什么区别?很多人不了解平面设计师和UI设计师有什么区别,甚至有些时候UI设计师被冠以平面美工,其实这都是不正确的想法,UI设计的精髓在于界面交

    05-08[平面其它]

  • 【精选职位之平面设计】

    戳上面加入 帝都求职圈 智联招聘官方北京地区求职信息平台 公众号下回复“ 4.12职位 ”获取投递链接 1 北京博影世纪文化传播有限公司 公司简介: 北京博影世纪文化传播有限

    05-08[平面其它]

  • 偶然形!在平面设计中的运用

    文/李蓟宁 图/Google 偶然形是一种特殊的设计语言,由于它兼有抽象、变化、不规则的形态特征,在各种领域中人们常常对于偶然形的应用与解读带有一种不确定性的认知。大大影

    05-08[平面其它]

  • 从平面到立体:一张纸的神奇妙用

    文章转自: 创意盒子touchbox 一张普普通通的纸,可以用来做什么? 除了常见的写字,画画,折纸等用法, 你还能想出更多的方法吗? 作为生活中最常见的材料之一, 我们几乎

    05-08[平面其它]

  • 每个设计师都应该拥有 InDesign模板

    如果你打算放在一起一本杂志,书,或小册子,Adobe InDesign毫无疑问是你选择的工具。这个软件是完全针对为印刷和数字创建复杂的布局,但有时你需要一点帮助。 这

    05-08[Indesign]

  • ikuku精选课 InDesign排版与设计研习班 2017.4.27正式开课!

    点击上方 “ikuku消息” 可以订阅哦! 报名方式 1、学费:450元/期,本期课程共计招收100位学员。(前20位ikuku注册用户报名优惠至380元,第21-50位ikuku注册用户报名优惠至400元。)

    05-08[Indesign]

  • 如何InDesign创建一个时尚日期的卡片 ?

    你和一个朋友可能才engaged-congratulations呀!一旦你设定一个日期大喜的日子,你需要让你的客人知道那天保持自由的日记。最好的方法就是给他们一个时髦的保存日期卡。 保存日期

    05-08[Indesign]

  • HTML基础2--认识HTML

    什么是HTML HTML其实是HyperText Markup Language的缩写, 超文本标记语言 HTML的作用 1.首先利用记事本保存了一个标题和两段描述, 然后修改纯文本文件的扩展名为.html, 然后再利用浏览器

    05-08[HTML]

  • HTML词汇表总汇,值得收藏

    点击上方「 web前端网页设计」一键关注,更多网页设计 UI设计 Html div css HTML5+CSS3、JavaScript、JQuery,PHP、mysql、帝国CMS建站教程尽在掌握。 声明:本文章来自互联网分享如涉及到

    05-08[HTML]

  • HTML+CSS基础学习-认识标签

    div div 可定义文档中的分区或节(division/section)。 div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。 如果用 id 或 c

    05-08[HTML]

  • html初探

    欢迎进入web世界 World Wide web(万维网) 简称:www web本意是蜘蛛网和网的意思。现广泛译作网络、互 联网等技术领域。表现为三种形式,即 超文本 (hypertext) 、 超媒体(hypermedi

    05-08[HTML]

  • 开发者提到最多的十个 GitHub 仓库

    简评:freeCodeCamp 社区最活跃的的部分是聊天室系统,里面会有数以千计的人在讨论技术(其实是灌水),互相帮助提高彼此的 coding 技能,在提到的众多 GitHub 仓库中,以下十个

    05-07[Bootstrap]

  • 前端开发技能表

    来自:猿哥(微信号:YuanGe200) 从1676家知名企业的前端招聘信息中统计出来的。 统计说明: 1、数据来自企业的招聘信息,不是猿哥根据自己想法排名的。可能有些技术点过时

    05-07[Bootstrap]

  • 完全理解双亲委派模型与自定义 ClassLoader

    (点击 上方公众号 ,可快速关注) 来源:huachao1001, 如有好文章投稿,请点击 → 这里了解详情 其实,双亲委派模型并不复杂。自定义类加载器也不难!

    05-07[Bootstrap]

  • 【WEB实战】Bootstrap开发响应式页面

    课程介绍 随着移动设备的普及,越来越多的公司喜欢招聘可以开发响应式页面的人才,而Bootstrap正是可以高效快速的开发出一套全平台响应的前端框架,所以说学习Bootstrap可以让

    05-07[Bootstrap]

  • 【Bootstrap视频教程】 第20章 项目实战--案例与关于[7]

    截止到今天,这个系列的视频教程就已经跟大家分享完毕了,如果你想看前面的其他视频教程,请点击相关视频里的相关教程。 相关视频教程 【Bootstrap视频教程】第1章 | Bootst

    05-07[Bootstrap]

  • 五大顶级CSS性能优化工具,值得程序员一试!

    为什么Web页面的加载速度如此重要?在这个信息化的时代,如果一个网站的加载时间过长,大部分用户会极其不耐烦地选择“关掉”!这让辛辛苦苦熬夜敲代码的程序员们情

    05-07[CSS]

  • 【神文】一张图,教你用25种可视化工具如何完成

    散点图真是一个比较神奇的图形,正如它的名字一样,一堆纷乱如麻的圆点,看似无迹可寻却能显示出数据难以显示的内在逻辑关系。很多人称它“万表之王”,它在数据分

    05-07[Highcharts]

  • 25种工具带你将散点图玩到极致

    散点图真是一个比较神奇的图形,正如它的名字一样,一堆纷乱如麻的圆点,看似无迹可寻却能显示出数据难以显示的内在逻辑关系。很多人称它“万表之王”,它在数据

    05-07[Highcharts]

  • Docker 捐出 Containerd;CoreOS 捐出 rkt

    容器生态圈的历史性事件: 随着Docker容器运行时containerd、CoreOS容器引擎rkt双双进入CNCF,容器生态即将进入一个崭新的发展阶段:OCI 容器运行时标准runc+CNCF容器运行时实现将成各

    05-07[JSON]

  • 【春招】贝朗医疗、中国电信、中建三局、OPPO、华润置地、国泰君安等名企精

    目录 1.【全国】德国贝朗医疗2017春季校园招聘 【网申地址】 【招聘职位】 【招聘流程】 2.【北京】麦田房产2017春季校园招聘 【网申地址】

    05-07[JSON]

  • 「号称」所有人都在使用的微服务架构概念,应该怎样理解?

    作者|王庆友 编辑|Gary 当前微服务很热,大家都号称在使用微服务架构,但究竟什么是微服务架构?微服务架构是不是发展趋势?对于这些问题,我们都缺乏清楚的认识,本文

    05-07[JSON]

  • [认证授权] 2.OAuth2授权(续) & JSON Web Token

    0. RFC6749还有哪些可以完善的? 0.1. 撤销Token 在上篇 [认证授权] 1.OAuth2授权 中介绍到了OAuth2可以帮我们解决第三方Client访问受保护资源的问题,但是只提供了如何获得access_toke

    05-07[JSON]

  • 【第3章第315回】Typescript-tsconfig.json

    文章共 447 字 ,阅读大约需要 5 分钟 。 tsconfig.json 如果一个目录下存在一个tsconfig.json文件,那么它意味着这个目录是TypeScript项目的根目录 tsconfig.json文件中指定了用来编译这个

    05-07[JSON]

  • Protobuf有没有比JSON快5倍?用代码来击破pb性能神话

    导读:Google 的 Protocol Buffers 在数据编码的效率上似乎被神化了,一直流传性能是 JSON 等本文格式 5 倍以上,本文通过代码测试来比较 JSON 与 PB 具体的性能差别到底是多少。作者

    05-07[JSON]

  • 深入理解 JavaScript 中的 JSON

     

  • 1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 《HTML5教程》(HTML5 Tutorial)[压缩包] 下载

      《HTML5教程》(HTML5 Tutorial)[压缩包] 下载

      2017-05-09 17:09

    • HTML5 Canvas 颜色填充学习

      HTML5 Canvas 颜色填充学习

      2017-05-09 08:06

    • 提高HTML5 canvas性能的几种方法(转)

      提高HTML5 canvas性能的几种方法(转)

      2017-05-08 12:01

    • 理解javascript中的回调函数(callback)

      理解javascript中的回调函数(callback)

      2017-05-08 12:00

    网友点评