Canvas 随机漂浮的小行星动画 - 摩擦力

踏得网在线教程配套实例。实现一个Asteroid（小行星）对象，属性包含：位置（即x/y坐标）、半径和速度。然后用数组容纳这些对象，画在Canvas上。

Canvas

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/* 带摩擦力和加速度的小行星动画 */

$(document).ready(function() {
    var canvas = $("#myCanvas");
    var context = canvas.get(0).getContext("2d");
    var canvasWidth = canvas.width();
    var canvasHeight = canvas.height();
    $(window).resize(resizeCanvas);

var Asteroid = function(x, y, radius, vX, vY, aX, aY) {
        this.x = x;
        this.y = y;
        this.radius = radius;

this.vX = vX;
        this.vY = vY;
        this.aX = aX;
        this.aY = aY;
    };

var asteroids = new Array();
    for (var i = 0; i < 30; i++) {
        var x = 20 + (Math.random() * (canvasWidth - 40));
        var y = 20 + (Math.random() * (canvasHeight - 40));
        var radius = 5 + Math.random() * 10;
        var vX = Math.random() * 4 - 2;
        var vY = Math.random() * 4 - 2;
        var aX = Math.random() * 0.2 - 0.1;
        var aY = Math.random() * 0.2 - 0.1;

asteroids.push(new Asteroid(x, y, radius, vX, vY, aX, aY));
    };

function animate() {
        context.clearRect(0, 0, canvasWidth, canvasHeight);
        context.fillStyle = "rgb(255, 255, 255)";

var asteroidsLength = asteroids.length;
        for (var i = 0; i < asteroidsLength; i++) {
            var tmpAsteroid = asteroids[i];
            tmpAsteroid.x += tmpAsteroid.vX;
            tmpAsteroid.y += tmpAsteroid.vY;
            if (Math.abs(tmpAsteroid.vX) < 10) {
                tmpAsteroid.vX += tmpAsteroid.aX;
            };

if (Math.abs(tmpAsteroid.vY) < 10) {
                tmpAsteroid.vY += tmpAsteroid.aY;
            };
            if (Math.abs(tmpAsteroid.vX) > 0.1) {
                tmpAsteroid.vX *= 0.9;
            } else {
                tmpAsteroid.vX = 0;
            };

if (Math.abs(tmpAsteroid.vY) > 0.1) {
                tmpAsteroid.vY *= 0.9;
            } else {
                tmpAsteroid.vY = 0;
            };

if (tmpAsteroid.x - tmpAsteroid.radius < 0) {
                tmpAsteroid.x = tmpAsteroid.radius;
                tmpAsteroid.vX *= -1;
                tmpAsteroid.aX *= -1;
            } else if (tmpAsteroid.x + tmpAsteroid.radius > canvasWidth) {
                tmpAsteroid.x = canvasWidth - tmpAsteroid.radius;
                tmpAsteroid.vX *= -1;
                tmpAsteroid.aX *= -1;
            };

if (tmpAsteroid.y - tmpAsteroid.radius < 0) {
                tmpAsteroid.y = tmpAsteroid.radius;
                tmpAsteroid.vY *= -1;
                tmpAsteroid.aY *= -1;
            } else if (tmpAsteroid.y + tmpAsteroid.radius > canvasHeight) {
                tmpAsteroid.y = canvasHeight - tmpAsteroid.radius;
                tmpAsteroid.vY *= -1;
                tmpAsteroid.aY *= -1;
            };

context.beginPath();
            context.arc(tmpAsteroid.x, tmpAsteroid.y,
                tmpAsteroid.radius, 0,
                Math.PI * 2, false);
            context.closePath();
            context.fill();
        };

if (playAnimation) {
            setTimeout(animate, 33);
        };
    };

animate();
});

编译

CSS

HTML

踏得网在线教程配套实例。实现一个Asteroid（小行星）对象，属性包含：位置（即x/y坐标）、半径和速度。然后用数组容纳这些对象，画在Canvas上。

Canvas

编辑器支持Emmet

快捷键

踏得网在线教程配套实例。 实现一个Asteroid（小行星）对象，属性包含：位置（即x/y坐标）、半径和速度。然后用数组容纳这些对象，画在Canvas上。

Canvas

HTML5 Canvas滤镜特效示例 - 带模糊光晕背景的五角星粒子动画

Canvas 多种形状的星星图案动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

踏得网在线教程配套实例。实现一个Asteroid（小行星）对象，属性包含：位置（即x/y坐标）、半径和速度。然后用数组容纳这些对象，画在Canvas上。