文档章节

HTML5中使用canvas绘制圆形

博为峰教研组
 博为峰教研组
发布于 2017/04/06 10:33
字数 363
阅读 10
收藏 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();因为路径已经决定了图形的大小,所以这里就不需要在该方法中使用参数来指定图形的大小了。

 

运行的效果为:

 

 

© 著作权归作者所有

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

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

凯哥学堂
2017/10/30
0
0
HTML5 从基础学习之二 --Canvas Geolocation Cache

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

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

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

kevin_pang
2014/02/25
0
0
HTML5应用——欢乐老虎机

在上面一篇博文中,我介绍了HTML5应用的简易播放器,这篇博文中介绍一个比较复 杂的HTML5游戏-老虎机。 寒假在家玩老虎机输了些许钱,所以自己就萌生了写个老虎机的游戏。开始打算用Visual ...

晨曦之光
2012/02/17
0
3
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud Gateway真的有那么差吗?

前言 Spring Cloud从一开始最受大家质疑的就是网关性能,那是由于Spring Cloud最初选择了使用Netflix几年前开源的Zuul作为基础,而高性能版的Zuul 2在经过了多次跳票之后,对于Spring这样的整...

Java小铺
40分钟前
1
0
SpringBoot远程调试,远程debug你的线上项目

开发环境中代码出错了,可以利用IDE的debug功能来进行调试。那线上环境出错呢? 一、假设我们的项目是部署在tomcat中,那我们就需要对tomcat进行一定对配置,配置如下。 1. windows系统中,找...

nonnetta
45分钟前
0
0
JAVA秒杀优化方向

秒杀优化方向 将请求尽量拦截在系统上游:传统秒杀系统之所以挂,请求都压倒了后端数据层,数据读写锁冲突严重,几乎所有请求都超时,流量虽大,下单成功的有效流量甚小,我们可以通过限流、...

小贱是个程序员
52分钟前
0
0
C# 统计字符串中大写字母和小写字母的个数

static void Main() { int count1 = 0; int count2 = 0; Console.WriteLine("请输入字符串"); string str = Convert.ToString(Consol......

熊二的爸爸是谁
55分钟前
0
0
分布式服务框架之远程通讯技术及原理分析

在分布式服务框架中,一个最基础的问题就是远程服务是怎么通讯的,在Java领域中有很多可实现远程通讯的技术,例如:RMI、MINA、ESB、Burlap、Hessian、SOAP、EJB和JMS等,这些名词之间到底是...

老道士
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部