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+js实现简单的时钟特效
Mar 18 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
Jan 09 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 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 缓冲的免费实现方法
2006/10/09 PHP
php实现的在线人员函数库
2008/04/09 PHP
PHP 实用代码收集
2010/01/22 PHP
解析php中curl_multi的应用
2013/07/17 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
wxPython中文教程入门实例
2014/06/09 Python
Python内置数据类型详解
2014/08/18 Python
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
如何理解委托
2012/01/06 面试题
教育孩子心得体会
2014/01/01 职场文书
老师对学生的评语
2014/04/18 职场文书
中学生英语演讲稿
2014/04/26 职场文书
民事上诉状范文
2015/05/22 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书