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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 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无法实现多线程的问题
2015/09/25 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
Django与遗留的数据库整合的方法指南
2015/07/24 Python
谈谈python中GUI的选择
2018/03/01 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
C#中的验证控件有几种
2014/03/08 面试题
大三自我鉴定范文
2013/10/05 职场文书
后进生转化工作制度
2014/01/17 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
采购意向书范本
2014/03/31 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
小学毕业感言100字
2015/07/30 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL
Spring Boot实现文件上传下载
2022/08/14 Java/Android