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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
jquery remove方法应用详解
Nov 22 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
Node 模块原理与用法详解
May 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
我用php+mysql写的留言本
2006/10/09 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python 从相对路径下import的方法
2018/12/04 Python
python数值基础知识浅析
2019/11/19 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
2014年纪检工作总结
2014/11/12 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
2019 入党申请书范文
2019/07/10 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏