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实现文字折纸效果实例代码
Jul 10 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
POST提交数据常见的四种方式
Jan 18 HTML / CSS
HTML中的表单元素介绍
Feb 28 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的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
python 使用值来排序一个字典的方法
2018/11/16 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
详解python深浅拷贝区别
2019/06/24 Python
python中的decimal类型转换实例详解
2019/06/26 Python
django-allauth入门学习和使用详解
2019/07/03 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
培训研修方案
2014/06/06 职场文书
辞职书格式样本
2015/02/26 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
接待员岗位职责范本
2015/04/15 职场文书
三八节活动简报
2015/07/20 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL