Html5 Canvas动画旋转的小方块;
2015-12-11 11:13
513 查看
<!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 设计辅助功能
- HTML5商城开发一 楼层滚动加载数据
- html5 标签img学习(待更新)
- 用HTML5打造本地桌面应用
- html5基础学习(标签)
- Html5实现手机九宫格密码解锁功能
- h5+百度地图获取地理位置
- 系列文章--HTML5学习系列链接
- 使用HTML5本地 Drag和Drop API(native API)
- HTML5 背景图片自适应屏幕的大小
- HTml5 进度条实现,以及控制进度条加载速度
- webSocket应用:同步html5画布
- 内部用的html5和css3资料
- HTML5创建一个径向/圆渐变
- HTML5创建线条渐变
- HTML5 Canvas八大核心技术及其API用法
- 10款基于HTML5+CSS3实现的超酷源码动画
- html5 canvas绘制圆形进度实例
- Html5中的跨页面消息传输
- 用html5 Canvas制作一个简单的游戏 英雄抓小怪物(上)