jQuery + Canvas 伸缩旋转方块_H5之家 - 中国HTML5教程资源分享第一站

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas</title> <script type="text/javascript" src="http://www.cnblogs.com/lovling/p/jQuery.js"></script> </head> <style type="text/css"> body { padding: 0; margin: 0; background: black; } #canvas { background: white; margin: 100px 0 0 300px; } #canvas>span { color: white; font-size: 14px; } </style> <body> <canvas> <span>您的浏览器不支持</span> </canvas> </body> </html> <script type="text/javascript"> /*获取绘制环境*/ var oc = $('#canvas')[0]; var canvas = oc.getContext('2d'); /*偏移*/ canvas.translate(200, 200); var num = 0, multiple = 1, value = ; setInterval(function(){ num++; if(multiple == 100 || multiple == 0){ value *= -1; } multiple += value; /*局面canvas的起始点*/ canvas.save(); /*图形倍数(横向放大倍数,纵向放大倍数)*/ canvas.scale(multiple*1/50, multiple*1/50); /*清理屏幕由于圆点被偏移,画布的坐标也跟着发生偏移*/ canvas.clearRect(-150, -150, oc.width, oc.height); /*旋转弧度*/ canvas.rotate(num*Math.PI/180); /*偏移旋转中心*/ canvas.translate(-50, -50); /*填充方块*/ canvas.fillRect(0, 0, 100, 100); /*局面canvas的结束点*/ canvas.restore(); }, 30);

Tags：jQuery