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+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
JavaScript严格模式详解
Jan 16 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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之PHP语法学习笔记1
2006/12/17 PHP
php学习之 数组声明
2011/06/09 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
python使用cookie库操保存cookie详解
2014/03/03 Python
Python 私有化操作实例分析
2019/11/21 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
酒店管理专业毕业生推荐信
2013/11/10 职场文书
大学总结自我鉴定
2014/01/18 职场文书