Canvas 旋转的眼球

Source: http://paulirish.com/2011/requestanimationframe-for-smart-animating/ http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1499
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() {
                    callback(currTime + timeToCall);
                },
                timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());
// ends requestAnimationFrame polyfill

var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width = window.innerWidth;
var ch = c.height = window.innerHeight;
var cX = cw / 2,
    cY = ch / 2;
var rad = Math.PI / 180;
var R = 30;
var r = 20;
var ro = 15
    //angle increment
var increment = 1.5;
var speed = .1;

var p = [];
var stopped = true;

function buildRy() {
    var C = 0;
    cw = c.width = window.innerWidth;
    ch = c.height = window.innerHeight;
    for (var i = 0; i < cw; i += R * 2) {
        for (var j = 0; j < ch; j += R * 2) {

p[C] = {
                moveToX: i + R + r,
                moveToY: j + R,
                Cx: i + R,
                Cy: j + R,
                a: C * increment * rad
            };
            C++;
        }
    }
    console.log(p.length)
    return p;
}

function Draw() {
    ctx.clearRect(0, 0, cw, ch);
    for (var k = 0; k < p.length; k++) {
        p[k].a += speed
        ctx.fillStyle = "white";
        ctx.beginPath();
        ctx.moveTo(p[k].moveToX, p[k].moveToY);
        ctx.arc(p[k].Cx, p[k].Cy, r, 0, 2 * Math.PI);
        ctx.fill();

ctx.fillStyle = "black";
        ctx.beginPath();
        var cx = p[k].Cx + (r - ro) * Math.cos(p[k].a)
        var cy = p[k].Cy + (r - ro) * Math.sin(p[k].a)
        ctx.arc(cx, cy, ro, 0, 2 * Math.PI);
        ctx.fill();
    }
    requestId = window.requestAnimationFrame(Draw);
}

function start() {
    requestId = window.requestAnimationFrame(Draw);
    stopped = false;
}

function stopAnim() {
    if (requestId) {
        window.cancelAnimationFrame(requestId);
    }
    stopped = true;
}

编译

CSS

HTML

Source: http://paulirish.com/2011/requestanimationframe-for-smart-animating/ http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

编辑器支持Emmet

快捷键

Source: http://paulirish.com/2011/requestanimationframe-for-smart-animating/ http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

Canvas 由短线段构成的旋转立方体

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：