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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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 缓冲的免费实现方法
2006/10/09 PHP
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
FCK调用方法..
2006/12/21 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
Python实现简单HTML表格解析的方法
2015/06/15 Python
深入解析Python中的上下文管理器
2016/06/28 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
python 基于opencv去除图片阴影
2021/01/26 Python
高级人员简历的自我评价分享
2013/11/03 职场文书
生产现场工艺工程师岗位职责
2013/11/28 职场文书
大学军训感言200字
2014/02/26 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
致运动员赞词
2015/07/22 职场文书
检讨书之工作不认真
2019/08/14 职场文书
java实现面板之间切换功能
2022/06/10 Java/Android
python 使用pandas读取csv文件的方法
2022/12/24 Python