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实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 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
咖啡语言
2021/03/03 咖啡文化
一个分页的论坛
2006/10/09 PHP
PHP下几种删除目录的方法总结
2007/08/19 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
python下载图片实现方法(超简单)
2017/07/21 Python
Django与JS交互的示例代码
2017/08/23 Python
使用python为mysql实现restful接口
2018/01/05 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
颐和园导游词400字
2015/01/30 职场文书
导游词300字
2015/02/13 职场文书
交通安全月活动总结
2015/05/08 职场文书
行政处罚决定书
2015/06/24 职场文书
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android