文档章节

HTML5中使用canvas绘制圆形

博为峰教研组
 博为峰教研组
发布于 2017/04/06 10:33
字数 363
阅读 11
收藏 0

下面我们就来看一下使用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();因为路径已经决定了图形的大小,所以这里就不需要在该方法中使用参数来指定图形的大小了。

 

运行的效果为:

 

 

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
JavaEE——HTML5绘画

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 绘画是HTML5的新功能,以前是没有的,有flash的...

凯哥学堂
2017/10/30
0
0
程序猿必备的10款web前端动画插件十三

  1.jQuery圆形旋转切换菜单 带菜单项描述   jQuery有着无数的插件,菜单插件是jQuery插件中最多的,尤其是CSS3和HTML5的配合,让jQuery菜单变得更加丰富多彩。今天我们要给大家分享一款...

爱码农
2018/08/30
0
0
HTML5 从基础学习之二 --Canvas Geolocation Cache

HTML5 的canvas元素使用JavaScript在网页上绘制图像 其拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。 1、Canvas元素的创建(规定元素的id,宽度和高度) <canvas id="myCanvas" ...

Drealin
2012/09/07
0
0
Web 开发中的矢量绘图处理和应用

矢量绘图一直是 Web 开发中一直比较薄弱的环节。本文首先针对不同浏览器详细阐述不同的矢量绘图解决方案,其中包括 HTML5 Canvas、SVG 以及 VML 等技术;之后针对每种不同的技术介绍其实现和...

IBMdW
2011/09/03
1K
0
Web开发中的矢量绘图(vml,svg)处理和应用

前言 1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 ...

kevin_pang
2014/02/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java 树形图构建

https://blog.csdn.net/massivestars/article/details/53911620/

kuchawyz
26分钟前
1
0
零基础如何学习大数据技术,大数据学习路线是什么?

在目前,当零基础学习大数据视频教程前,首先我们要学习Java语言和Linux操作系统,这两个是学习大数据的基础,学习的顺序不分前后。 对于小白学习大数据需要注意的点有很多,但无论如何,既然...

董黎明
28分钟前
2
0
123

123

lifes77
29分钟前
0
0
MySQL游标

MySQL游标 While循环 -- MySQL游标只能用于存储过程和函数-- 使用过程 声明、打开游标、使用游标、关闭游标-- 如果未明确关闭游标,END时会自动关闭-- https://dev.mysql.com/doc/refman/...

yysue
29分钟前
1
0
互联网下半场的角逐,玩转轻资产的大数据服务 | 阿里云栖开发者沙龙大数据专场(北京站)干货集锦

2019年1月18日下午,一个晴冷的冬日,由阿里巴巴MaxCompute开发者社区和阿里云栖社区联合主办的“阿里云栖开发者沙龙大数据技术专场”走近北京联合大学。当日,近200名大数据开发者和爱好者现...

阿里云官方博客
31分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部