html5画布旋转效果示例


Posted in HTML / CSS onJanuary 27, 2014

keleyi.htm的代码如下:

复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>html旋转画布</title>
<script type="text/javascript" src="/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="3water.js"></script>
</head>
<body>
<canvas id="3water"></canvas>
</body>
</html>

3water.js的代码如下:

复制代码
代码如下:

/*
* 功能:画布旋转
*/
(function(){
var canvas=null,
context=null,
angle=0;
function resetCanvas(){
canvas=document.getElementById("3water");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
context=canvas.getContext("2d");
}
function animate(){
context.save();
try{
//清除画布
context.clearRect(0, 0, canvas.width, canvas.height);
//设置原点
context.translate(canvas.width * 0.5, canvas.height * 0.5);
//旋转角度
context.rotate(angle);
//设置填充颜色
context.fillStyle = "#FF0000";
//绘制矩形
context.fillRect(-30, -30, 60, 60);
angle += 0.05 * Math.PI;
}
finally{
context.restore();
}
}
$(window).bind("resize",resetCanvas).bind("reorient",resetCanvas);
$(document).ready(function(){
window.scrollTo(0,1);
resetCanvas();
setInterval(animate,40);
});
})();
HTML / CSS 相关文章推荐
CSS3属性box-shadow使用详细教程
Jan 21 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
css3的focus-within选择器的使用
May 11 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 #HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 #HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 #HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 #HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 #HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 #HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 #HTML / CSS
You might like
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
php 伪静态之IIS篇
2014/06/02 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
php构造函数与析构函数
2016/04/23 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
js CSS操作方法集合
2008/10/31 Javascript
JavaScript关于select的相关操作说明
2010/01/13 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
存储过程和sql语句的优缺点
2014/07/02 面试题
商业企业管理专业求职信
2014/07/10 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
医院科室评语
2015/01/04 职场文书
2015年实习单位评语
2015/03/25 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
德劲DE1102数字调谐收音机机评
2022/04/07 无线电
Java 超详细讲解hashCode方法
2022/04/07 Java/Android
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL