ИЗБРАННЫЕ ПРИМЕРЫ JAVASCRIPT+CSS 2013 года

Библиотека javascript SE@RCHER ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. ЯНВАРЬ >>>

HTML ↴

<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег canvas Сжимающая пружина  (canvas HTML5)</title>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
            
            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script>
            window.requestAnimFrame = (function(callback){
                return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback){
                    window.setTimeout(callback, 1000 / 60);
                };
            })();
            
            function drawSpring(canvas, context){
                context.beginPath();
                context.moveTo(0, 0);
                
                for (var y = 0; y < 200; y++) {
                    // Sine wave equation
                    var x = 30 * Math.sin(y / 9.05);
                    context.lineTo(x, y);
                }
            }
            
            function drawWeight(canvas, context){
                var size = 100;
                context.save();
                context.fillStyle = "red";
                context.fillRect(-size / 2, 0, size, size);
                context.restore();
            }
            
            function animate(canvas, theta, lastTime){
                var context = canvas.getContext("2d");
                
                // update
                var date = new Date();
                var time = date.getTime();
                var timeDiff = time - lastTime;
                theta += timeDiff / 400;
                lastTime = time;
                
                var scale = 0.8 * (Math.sin(theta) + 1.3);
                
                // clear
                context.clearRect(0, 0, canvas.width, canvas.height);
                
                // draw
                context.save();
                context.translate(canvas.width / 2, 0);
                
                context.save();
                context.scale(1, scale);
                drawSpring(canvas, context);
                context.restore();
                
                context.lineWidth = 6;
                context.strokeStyle = "#0096FF"; // blue-ish color
                context.stroke();
                
                context.translate(0, 200 * scale);
                drawWeight(canvas, context);
                context.restore();
                
                // request new frame
                requestAnimFrame(function(){
                    animate(canvas, theta, lastTime);
                });
            }
            
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var theta = 0;
                var date = new Date();
                var time = date.getTime();
                animate(canvas, theta, time);
            };
        </script>
    </head>
    <body onmousedown="return false;">
        <canvas id="myCanvas" width="578" height="500">
        </canvas>
     <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

ИЗБРАННЫЕ ПРИМЕРЫ JAVASCRIPT+CSS 2013 года

HTML ↴

размер Kb

ПРИМЕР ↴

✔ пример в полном окне