js+html5实现canvas绘制椭圆形图案的方法


Posted in Javascript onMay 21, 2016

本文实例讲述了js+html5实现canvas绘制椭圆形图案的方法,HTML5 canvas 没有画椭圆的方法,以下代码可以画出椭圆,分享给大家供大家参考,具体实现方法如下:

1、在一个隐式的画布 (将 其 CSS 定义成:display:none; ) 上画园。
2、将隐式画布的影像,以不同的宽高比值,画在另一个显式的画布,以使园变成椭圆。
3、进而,加进动画功能。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试颜色背景</title>
<script>
var ticker=0;
var col = new Array("#000000","#A52A2A","#B8860B","pink","green","yellow","red","orange","#BB008B","#8B0000");
 
function drawBackground(){
var canvasHide=document.getElementById("hide"); //隐藏的画布
var g=canvasHide.getContext("2d"); //找出隐藏画布 hide 的画笔 g 
g.clearRect(0,0,1200,800); //清理隐藏画布
var i=0;
do { //画 不同颜色 依次同心发散的园
g.beginPath();
var grd=g.createRadialGradient(300,300,300-i*25, 300,300,265-i*25);
grd.addColorStop(0,col[(0+i+ticker)%col.length]);
grd.addColorStop(1,col[(1+i+ticker)%col.length]);
g.fillStyle=grd;
g.arc(300,300,300-i*25,0,2*Math.PI);
g.fill();
i++;
} while(i<11);
 
//找出显式画布 myCanvas 的画笔 gg 
var gg=document.getElementById("myCanvas").getContext("2d");
gg.clearRect(0,0,myCanvas.width,myCanvas.height); //清理显式画布
 
/* 将隐式画布 hide 的园形图像,
 * 以 宽 600, 高 300 的比例,
 * 画到显式画布 myCanvas,
 * 结果,隐式画布 hide 的园形图像,在显式画布 myCanvas 上 成了椭圆
 */
gg.drawImage(canvasHide,0,0,600,300); 
ticker++;
}
 
function preperation(){
setInterval('drawBackground()',1000);
 }
</script>
<style>
#myCanvas{
 position:absolute;
 left:0px;
 top:0px;
}
#hide{
 display:none;
}
</style>
</head>
 
<body onLoad="preperation()">
<canvas id="myCanvas" width="600" height="400" ></canvas>
<canvas id="hide" width="600" height="600" ></canvas>
 
</body>
</html>

希望本文所述对大家的web程序设计有所帮助。

Javascript 相关文章推荐
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 #Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 #Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 #Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 #Javascript
IScroll5 中文API参数说明和调用方法
May 21 #Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 #Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 #Javascript
You might like
15种PHP Encoder的比较
2007/04/17 PHP
PHP仿盗链代码
2012/06/03 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
js实现双人五子棋小游戏
2020/05/28 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
python 贪心算法的实现
2020/09/18 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
python音频处理的示例详解
2020/12/23 Python
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
Java基础面试题
2012/11/02 面试题
加拿大探亲邀请信
2014/01/28 职场文书
趣味运动会活动方案
2014/02/12 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
党员自我评价范文2015
2015/03/03 职场文书
员工自我工作评价
2015/03/06 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
字典算法实现及操作 --python(实用)
2021/03/31 Python
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang