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 ...
随机推荐
- Android IOS WebRTC 音视频开发总结（六一）-- 大数据解密国内实时通讯行业开发现状
本文主要介绍国内实时通讯行业现状,文章最早发表在我们的微信公众号上,详见这里,欢迎关注微信公众号blackerteam,更多详见www.blackerteam.com 这几年移动互联网发展势头很猛,与 ...
- Oracle VM VirtualBox 设置本机与虚拟机共享文件
文章转载自http://wenku.baidu.com/link?url=5uZ1xWnGC55FGW2XUqzLVdttRcik2xCqwRKEdh6z-nZJ63UQn3j2750ES_q4Oro ...
- void指针(void*)用法
首先看一段测试代码: #include <stdio.h> int void_test(void* data) { ; num = *(int*)data; printf("nu ...
- linux下vi的复制，黏贴，删除，撤销，跳转等命令
前言 在嵌入式linux开发中,进行需要修改一下配置文件之类的,必须使用vi,因此,熟悉 vi 的一些基本操作,有助于提高工作效率. 一,模式vi编辑器有3种模式:命令模式.输入模式.末行模式 ...
- CentOS 6.4安装Kangle面板
kangle web server一键安装包是一个用Linux Shell编写的可以为CentOS 6 VPS(VDS)或独立主机安装kangle web server(kangle,easypane ...
- Web Service 中返回DataSet结果的几种方法
Web Service 中返回DataSet结果的几种方法: 1)直接返回DataSet对象 特点:通常组件化的处理机制,不加任何修饰及处理: 优点:代码精减.易于处理,小数据量处理较快: ...
- 利用js的for循环实现一个简单的“九九乘法表”
For循环九九乘法表 for循环是javascript中一种常用的循环语句,可以很好的解决在程序中需要重复执行某些语句,利用for循环实现简单的“九九乘法表”的效果: 让循环从小到大,依次排序,并计算 ...
- C# Async与Await用法
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- KMP串匹配算法解析与优化
朴素串匹配算法说明 串匹配算法最常用的情形是从一篇文档中查找指定文本.需要查找的文本叫做模式串,需要从中查找模式串的串暂且叫做查找串吧. 为了更好理解KMP算法,我们先这样看待一下朴素匹配算法吧.朴素 ...
- 多端口站点设置，以APMSERV集成环境为例！
以下以APMSERV集成环境为例: 1.找到你的apache上的配置文件httpd.conf,用记事本打开, D:\APMServ\Apache\conf 2.修改以下几项: Listen 80 下增 ...