Html5学习--运动且旋转并放大缩小的动画效果
来源：互联网 发布：苹果电脑安装软件方法 编辑：程序博客网 时间：2024/06/06 00:04
<!DOCTYPE HTML> <html><head><object id="WebBrowser" width=0 height=0 classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></object><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">(function(){var canvas=null,context=null,angle=0;num=0;value=1;function resetCanvas(){canvas=document.getElementById("simple");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);if(num==100){value=-1;}else if(num==0){value=1;}num +=value;context.scale(num*1/50,num*1/50)//设置原点context.translate(canvas.width * 0.5, canvas.height * 0.5);//旋转角度context.rotate(angle);//设置填充颜色context.fillStyle = "#FF0000";//绘制矩形context.fillRect(0, 0, 100, 100);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);});})();</script></script></head><body><canvas id="simple"></canvas></body></html>
