Html5 Canvas动画旋转的小方块；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html5 Canvas动画旋转的小方块；</title>
<link rel="stylesheet" href="">
</head>
<body>
<script>
window.onload=function(){
var canvas = document.querySelector("canvas");
canvas.width = canvas.height = 500
canvas.style.background = "red"
if (canvas.getContext) {
var ext = canvas.getContext("2d");
var num = 0;
var scale=0;
var value=0
ext.fillStyle = "#f90";
ext.translate(canvas.width / 2, canvas.height / 2);
function rotate() {
ext.clearRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height)
num++;
if(scale==100){
value=-1;
}else if(scale==0){
value=1
}
scale+=value
ext.save();
ext.rotate(num * Math.PI / 180)
ext.scale(scale*1/50,scale*1/50)
console.log(scale);
ext.translate(-50, -50)
ext.fillRect(0, 0, 100, 100);
ext.restore();
}
var t=setInterval(rotate,30);
canvas.onmouseover=function(){
clearInterval(t);
}
canvas.onmouseout=function(){
t=setInterval(rotate,30);
}
}
}
</script>
<canvas></canvas>
</body>
</html>
DEMO地址：http://codepen.io/jonechen/pen/xVbPLJ
Html5 Canvas动画旋转的小方块；的更多相关文章
- 7 个顶级的 HTML5 Canvas 动画赏析
HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 分享8款令人惊叹的HTML5 Canvas动画特效
HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...
- 16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 8个经典炫酷的HTML5 Canvas动画欣赏
HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...
- 7个惊艳的HTML5 Canvas动画效果及源码
HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...
- HTML5 Canvas动画效果演示
HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...
- HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET
HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示
- HTML5 Canvas动画效果实现原理
在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...
随机推荐
- Oracle sqlldr使用示例
SQLLDR用于快速的批量导入数据, 示例步骤如下: 1.确定Oracle的连接示例 username/password@sid 我使用的是:system/world @ localorcl sid是 ...
- .net 调用SAP RFC函数获取数据的两种方式
方式1:使用客户端自带的组件 安装客户端以后,添加引用:SAPFunctionsOCX(.net 的Com列表里一般找不到,需要引用DLL[一般位于以下路径:Program Files\SAP\Fro ...
- 修改 Ueditor 默认显示的字体大小
默认字体为16px,有点大,为了美观而且一屏可以显示更多内容,可以修改为12px 打开:ueditor.all.min.js 我用的是压缩版 找到如下代码: body{margin:8px;font- ...
- 魔兽塔防游戏android源码
魔兽塔防是一款经典的游戏,当年在pc机器上玩过魔兽的人应该都玩过类似的游戏,他仿照魔兽,建塔拦截敌人入侵,发挥你的智慧让敌人走最远的路,将他们消灭在路上.... 源码下载:http://code.66 ...
- css3内处理
1.插入文字:content属性: p:after{content:"内容"} p:before{content:"内容"} ...
- Thinking about think-time functions
You will find yourself very familier to this topic. Ok, let me ask you one question: Let me know th ...
- Silverlight DataGrid数据行背景颜色控制
sdk:DataGrid数据绑定后,部分特殊的行需要用不同的背景颜色来显示.(注册DataGrid的LoadingRow事件) private void radGridView_LoadingRow( ...
- URL的语法及HTTP报文
大多数URL方案的URL语法都建立在这个由9部分构成的通用格式上: scheme://user:password@host:port/path;params?query#frag 方案:http或者h ...
- PHP数组在HTML之中的应用
<select name="data[status]" id="" <?php if(in_array($list['status'],array( ...
- android 客户端支付宝 php服务器端编写
生成私钥 输入“genrsa -out rsa_private_key.pem 1024”命令,回车后,在当前 bin 文件目 录中会新增一个 rsa_private_key.pem 文件,其文件为原 ...