html5使用canvas画空心圆与实心圆


Posted in HTML / CSS onDecember 15, 2014

这里给大家分享的是一个学习canvas的时候做的画空心圆与实心圆的练习题,非常简单。

<canvas id="canvas" width="500" height="500" style="background-color: yellow;"></canvas>
 

复制代码
代码如下:

var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
//画一个空心圆
cxt.beginPath();
cxt.arc(200,200,50,0,360,false);
cxt.lineWidth=5;
cxt.strokeStyle="green";
cxt.stroke();//画空心圆
cxt.closePath();
//画一个实心圆
cxt.beginPath();
cxt.arc(200,100,50,0,360,false);
cxt.fillStyle="red";//填充颜色,默认是黑色
cxt.fill();//画实心圆
cxt.closePath();
//空心和实心的组合
cxt.beginPath();
cxt.arc(300,300,50,0,360,false);
cxt.fillStyle="red";
cxt.fill();
cxt.strokeStyle="green";
cxt.stroke();
cxt.closePath();
HTML / CSS 相关文章推荐
纯CSS3实现表单验证效果(非常不错)
Jan 18 HTML / CSS
CSS3截取字符串实例代码【推荐】
Jun 07 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 HTML / CSS
html5使用canvas画一条线
Dec 15 #HTML / CSS
html5绘制时钟动画
Dec 15 #HTML / CSS
html5的canvas方法使用指南
Dec 15 #HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 #HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 #HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 #HTML / CSS
HTML5中drawImage用法分析
Dec 01 #HTML / CSS
You might like
用PHP实现的随机广告显示代码
2007/06/14 PHP
Dedecms常用函数解析
2008/02/01 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
Python实现的双色球生成功能示例
2017/12/18 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
10个Python小技巧你值得拥有
2018/09/29 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
Python数据可视化图实现过程详解
2020/06/12 Python
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
群胜软件Java笔试题
2012/09/29 面试题
某公司Java工程师面试题笔试题
2016/03/27 面试题
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
工作求职自荐信
2014/06/13 职场文书
销售顾问工作计划书
2014/08/15 职场文书
电影圆明园观后感
2015/06/03 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
升学宴学生致辞
2015/09/29 职场文书