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之多背景background使用示例
Oct 18 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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生成随机密码的几种方法
2011/01/17 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
基于php实现的验证码小程序
2016/12/13 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
浅谈Python中copy()方法的使用
2015/05/21 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Python发展史及网络爬虫
2019/06/19 Python
区分python中的进程与线程
2020/08/13 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
老师给学生的表扬信
2014/01/17 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
买卖合同协议书范本
2014/10/18 职场文书
教师学期末个人总结
2015/02/13 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android
SQL Server 中的事务介绍
2022/05/20 SQL Server