Canvas 线条勾勒的心形图案

2014-05-01 20:52:59 +0800

此代码仅供参考

代码说明

Canvas 线条勾勒的心形图案

Source:
http://paulirish.com/2011/requestanimationframe-for-smart-animating/

温馨提示: 若要重新查看演示效果，需要点击背景。

html代码

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 canvas = document.getElementById("c");
var cw = canvas.width = window.innerWidth;
var ch = canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");
var angle = 90;
var r = ch / 3;
var step = 360;

ctx.globalAlpha = 0.5;

function draw() {
    ctx.save();

angle += 4;
    step -= 1;
    var a1 = (Math.PI / 180) * angle;
    var a2 = (Math.PI / 180) * (angle + step);
    var x1 = cw / 2 + r * Math.cos(a1);
    var y1 = ch / 2 + r * Math.sin(a1);
    var x2 = cw / 2 + r * Math.cos(a2);
    var y2 = ch / 2 + r * Math.sin(a2);

ctx.strokeStyle = "#f00";
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();

ctx.restore();

requestId = window.requestAnimationFrame(draw);
}

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

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

代码演示

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N