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 相关文章推荐
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
Javascript高级技巧分享
Feb 25 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
javascript编写简易计算器
May 06 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 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-fpm 参数的深入理解
2013/06/03 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
javascript forEach通用循环遍历方法
2010/10/11 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
python随机数分布random均匀分布实例
2019/11/27 Python
python中的逆序遍历实例
2019/12/25 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
医学专业个人求职自荐信格式
2013/09/23 职场文书
服务承诺书怎么写
2014/05/24 职场文书
求职导师推荐信范文
2015/03/27 职场文书
航班延误投诉信
2015/07/02 职场文书
会议室管理制度范本
2015/08/06 职场文书
少先队中队工作总结
2015/08/14 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
《三国志》赏析
2019/08/27 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
配置Kubernetes外网访问集群
2022/03/31 Servers