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动画效果抖动解决方法
Sep 03 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 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
德生PL990的分析评价
2021/03/02 无线电
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
解决uWSGI的编码问题详解
2017/03/24 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
python的常用模块之collections模块详解
2018/12/06 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
塔吉特百货公司官网:Target
2017/04/27 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL