Canvas画布之100个小球弹射源码

简介: Canvas画布之100个小球弹射源码

本文转载于,感谢大佬分享

项目文件预览 - CanvasStudy - GitCode

【基础知识】HTML5 Canvas设置Canvas元素width和height的两种不同方式(图文)_canvas.width-CSDN博客

效果展示:

 

<!DOCTYPE html>
 
<html>
<head>
    <title>Bouncing Balls运动小球</title>
 
    <meta charset="UTF-8">
 
    <style>
        body {
            background: #dddddd;
        }
 
        #canvas {
            margin-left: 10px;
            margin-top: 10px;
            background: #ffffff;
            border: thin solid #aaaaaa;
        }
 
        #glasspane {
            position: absolute;
            left: 50px;
            top: 50px;
            padding: 0px 20px 10px 10px;
            background: rgba(0, 0, 0, 0.3);
            border: thin solid rgba(0, 0, 0, 0.6);
            color: #eeeeee;
            font-family: Droid Sans, Arial, Helvetica, sans-serif;
            font-size: 12px;
            cursor: pointer;
            -webkit-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px;
            -moz-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px;
            box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px;
        }
 
        #glasspane h2 {
            font-weight: normal;
        }
 
        #glasspane .title {
            font-size: 2em;
            color: rgba(255, 255, 0, 0.8);
        }
 
        #glasspane a:hover {
            color: yellow;
        }
 
        #glasspane a {
            text-decoration: none;
            color: #cccccc;
            font-size: 3.5em;
        }
 
        #glasspane p {
            margin: 10px;
            color: rgba(65, 65, 220, 1.0);
            font-size: 12pt;
            font-family: Palatino, Arial, Helvetica, sans-serif;
        }
    </style>
</head>
 
<body>
<!--玻璃窗格 glass pane-->
<div id='glasspane'>
    <h2 class='title'>弹射小球</h2>
 
    <p>一百个小球弹射</p>
 
    <a id='startButton'>Start</a>
</div>
 
<canvas id='canvas' width='750' height='500'>
    Canvas not supported
</canvas>
 
<script>
    var context = document.getElementById('canvas').getContext('2d'),
        startButton = document.getElementById('startButton'),
        glasspane = document.getElementById('glasspane'),
        paused = true,
        circles = [];
 
    drawGird(context, 'lightgray', 10, 10);
 
    context.lineWidth = 0.5;
    context.font = '32pt Ariel';
 
    //给100个小球设置不同的方向,半径,颜色
    for (var i = 0; i < 100; i++) {
        circles[i] = {
            x: 100,
            y: 100,
            //向x方向移动的像素
            velocityX: 3 * Math.random(),
            velocityY: 3 * Math.random(),
            radius: 50 * Math.random(),
            color: 'rgba(' + (Math.random() * 255).toFixed(0) + ',' +
                (Math.random() * 255).toFixed(0) + ',' +
                (Math.random() * 255).toFixed(0) + ',1.0)'
        };
    }
 
    startButton.onclick = function (ev) {
        //取消默认行为
        ev.preventDefault();
        //阻止冒泡
        ev.stopPropagation();
        paused = !paused;
        startButton.innerText = paused ? '启动' : '暂停';
    };
 
    glasspane.onmousedown = function (ev) {
        ev.preventDefault();
        ev.stopPropagation();
    };
 
    context.canvas.onmousedown = function (ev) {
        ev.preventDefault();
        ev.stopPropagation();
    };
 
    setInterval(function () {
        if (!paused) {
            context.clearRect(0, 0, context.canvas.width, context.canvas.height);
            drawGird(context, 'lightgray', 10, 10);
 
            circles.forEach(function (circle) {
                context.beginPath();
                context.arc(circle.x, circle.y, circle.radius,
                    0, Math.PI * 2, false);
                context.fillStyle = circle.color;
                context.fill();
                adjustPosition(circle);
 
 
            });
        }
    }, 1000 / 60);
 
    /**
     * 调整每个球的位置,如果触碰到边缘,就调整方向
     * @param circle
     */
    function adjustPosition(circle) {
        if (circle.x + circle.velocityX + circle.radius > context.canvas.width || circle.x - circle.radius + circle.velocityX<0)
            circle.velocityX = -circle.velocityX;
 
        if (circle.y + circle.velocityY + circle.radius > context.canvas.height || circle.y - circle.radius + circle.velocityY<0)
            circle.velocityY = -circle.velocityY;
 
        circle.x += circle.velocityX;
        circle.y += circle.velocityY;
    }
 
    /**
     * 画网格线
     * @param context
     * @param color
     * @param stepX X方向网格间距
     * @param stepY Y方向网格间距
     */
    function drawGird(context,color,stepX,stepY) {
        context.strokeStyle = color;
        context.lineWidth = 0.5;
 
        for (var i = stepX+0.5;i<context.canvas.width;i+=stepX){
            context.beginPath();
            context.moveTo(i,0);
            context.lineTo(i, context.canvas.height);
            context.stroke();
        }
 
        for (var i = stepY + 0.5; i < context.canvas.height; i+=stepY) {
            context.beginPath();
            context.moveTo(0, i);
            context.lineTo(context.canvas.width, i);
            context.stroke();
        }
    }
</script>
</body>
</html>
相关文章
|
7月前
|
前端开发
canvas绘制圆环
canvas绘制圆环
|
3月前
|
前端开发 JavaScript
鼠标移动淡入淡出Canvas小球效果_特炫
本文通过HTML和JavaScript代码示例展示了如何实现鼠标移动时在Canvas上生成彩色小球并具有淡入淡出效果的动画,涉及Canvas的尺寸调整、小球对象的创建、颜色随机化、透明度变化和动画循环渲染等技术点。
39 1
鼠标移动淡入淡出Canvas小球效果_特炫
|
5月前
|
前端开发
Canvas添加了橡皮擦工具的画板项目和只能画圆的源码
Canvas添加了橡皮擦工具的画板项目和只能画圆的源码
|
7月前
|
前端开发 小程序
微信小程序canvas画布绘制;canvas画布图片保存
微信小程序canvas画布绘制;canvas画布图片保存
93 0
|
移动开发 前端开发 JavaScript
使用Canvas绘制图形和动画
使用Canvas绘制图形和动画
206 0
|
前端开发
canvas画布实现代码雨
canvas画布实现代码雨
103 0
|
前端开发 算法 JavaScript
使用 canvas 拖拽绘制矩形(带撤销)
之前预览网络摄像头的需求又有了下文,要在视频预览之上进行拖拽生成矩形边框,用于后台算法对区域内容进行一些处理。
341 0
|
前端开发
canvas绘制五角星
canvas绘制五角星
188 0
|
前端开发
基于canvas绘制边框环绕进度条
基于canvas绘制边框环绕进度条
250 0
基于canvas绘制边框环绕进度条
|
前端开发 开发者
Canvas中的拖拽、缩放、旋转 (下)——代码实现
Canvas中的拖拽、缩放、旋转 (下)——代码实现
589 0
Canvas中的拖拽、缩放、旋转 (下)——代码实现