canvas绘制篮球并使篮球滚动

最新推荐文章于 2021-06-22 16:07:34 发布

chenggou9601

最新推荐文章于 2021-06-22 16:07:34 发布

阅读量469

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3161974/blog/861519

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Declarative CSS Animation Demonstration</title>
<!--js创建canvas-->
    <!--<script>-->
        <!--var canvas=document.createElement("canvas");-->
        <!--canvas.innerHTML="在支持canvas元素的浏览器中，该元素应该出现在这里.";-->
        <!--canvas.height=200;-->
        <!--canvas.width=200;-->
        <!--document.body.appendChild(canvas);//...或者你希望canvas去的其他任何地方-->
    <!--</script>-->

</head>

<body>
<canvas width="550" height="350" id="canvass">
    在支持canvas元素的浏览器中，该元素应该出现在这里

</canvas>
<script>
    window.onload = function () {
        // Pay attention to the similarities between this and the code in
        // canvas-transforms.html.
        var canvas = document.getElementById("canvass");
        /* Note how, aside from the conversion of the for loop into a
         nextFrame function, the code has not otherwise changed much
         from the transformation example.  The only other differences
         are adjustments to the values: they make smaller changes to
         accommodate the frequency with which the canvas is redrawn. */
        var renderingContext = canvas.getContext("2d");
        var xStep = 2.5, yStep = -10.0;

        // Variables to represent the absolute position, rotation, and
        // scaling of the ball.
        var x = 5, y = 300, angle = 0;
        var compression = 0.5;

        // Start the ball at the bottom-left of the canvas.
        var nextFrame = function () {
            // Always return to the same state after each iteration.
            renderingContext.save();

            // Clear the canvas.
            renderingContext.clearRect(0, 0, canvas.width, canvas.height);

            // Move the ball to the current position.
            renderingContext.translate(x, y);

            // Scale and rotate the ball.
            renderingContext.scale(1, compression);
            renderingContext.rotate(angle);

            // *Now* draw.
            drawBasketball(renderingContext);

            // Calculate the new position, rotation, and scale.
            x += xStep; y += yStep; yStep += 0.25;
            angle += Math.PI / 180; // 1 degree.
            compression += (compression <= 0.95) ? 0.05 : 0;

            // Quick check to see if the ball has hit the "floor."
            // This results in a "bounce."
            if (y + yStep > 300) {
                compression = 0.5;
                y = 300; yStep = -10.0;
            }

            // One more check to see if the ball has gone "off-canvas."
            // This moves the ball back to the left side.
            if (x > canvas.width) {
                x = 50;
            }

            renderingContext.restore();
        };

        // One hundred frames per second!
        setInterval(nextFrame, 10);
    };
    var drawBasketball = function(renderingContext) {
        renderingContext.save();
        var gradient = renderingContext.createRadialGradient(-15, -15, 5, 15, 15, 75);//createLinearGradient() 方法创建放射状/圆形渐变对象。
        gradient.addColorStop(0, "rgb(255, 130, 0)");//addColorStop() 方法规定 gradient 对象中的颜色和位置。
        gradient.addColorStop(0.75, "rgb(128, 65, 0)");
        gradient.addColorStop(1, "rgb(62, 32, 0)");
        renderingContext.fillStyle = gradient;

        renderingContext.beginPath();
        renderingContext.arc(0, 0, 50, 0, 2 * Math.PI, true);
        renderingContext.fill();

        renderingContext.strokeStyle = "blue";
        renderingContext.lineWidth = 1;
        renderingContext.beginPath();
        renderingContext.moveTo(0, -49);
        renderingContext.bezierCurveTo(30, -35, 30, 35, 0, 49);
        renderingContext.moveTo(-49, 0);
        renderingContext.bezierCurveTo(-35, -30, 35, -30, 47, -15);
        renderingContext.moveTo(-35, 35);
        renderingContext.bezierCurveTo(0, -30, 50, -20, 45, 20);
        renderingContext.moveTo(-28, -40);
        renderingContext.bezierCurveTo(10, -35, 25, -35, 29, -40);
        renderingContext.stroke();
        renderingContext.restore();
    };

</script>
</body>
</html>

使用WebGL实现3D图形 http://javascript.cs.lmu.edu/webgl-sierpinski/

转载于:https://my.oschina.net/u/3161974/blog/861519

chenggou9601

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制篮球并使篮球滚动

<!doctype html><html><head><meta charset="utf-8"/><title>Declarative CSS Animation Demonstration</title>&l...
复制链接

扫一扫