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 相关文章推荐
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 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中用文本文件做数据库的实现方法
2008/03/27 PHP
PHP 递归效率分析
2009/11/24 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
独特的python循环语句
2016/11/20 Python
Django中的Model操作表的实现
2018/07/24 Python
Linux下多个Python版本安装教程
2018/08/15 Python
python实现ip代理池功能示例
2019/07/05 Python
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
《走一步再走一步》教学反思
2014/02/15 职场文书
党员一句话承诺大全
2014/03/28 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
师范生教育见习总结
2015/06/23 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android