JavaScript+canvas实现框内跳动小球

本文实例为大家分享了JavaScript+canvas实现框内跳动小球的具体代码，供大家参考，具体内容如下

效果如下:

思路:

1.制定画布,确定好坐标
2.绘制出圆形小球
3.给圆一个原始坐标,xy轴的速度
4.每20毫秒刷新一次,达到变化的目的
5.判断边缘

全部代码及释义如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <canvas id="canvas" style="border:1px solid #aaa;display:block;margin: 50px auto;">
    当前浏览器不支持canvas,请更新浏览器或者升级浏览器后再试
  </canvas>

  <script>
    // x: 小球原始x坐标,y: 小球原始y坐标, r: 小球半径, vx: x轴速度,vy: y轴的速度 (速度都以向量表示,所以可为负数)
    var ball = { x: 512, y: 100, r: 20, vx: -8, vy: 8, color: '#005588' }
    window.onload = function () {
      var canvas = document.getElementById("canvas");

      // 制定canvas画布的大小
      canvas.width = 860;
      canvas.height = 600;
      // 判断浏览器是否支持canvas
      if (canvas.getContext("2d")) {
        // 下面所有调用的函数都是基于context这个上下文环境来进行的
        var context = canvas.getContext("2d");

        setInterval(() => {
          render(context)
          update()
        }, 20);
      } else {
        alert("当前浏览器不支持canvas,请更新浏览器或者升级浏览器后再试");
      }
    };
    //十六进制颜色随机
    function color16() {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
      return color;
    }
    // 小球的坐标的刷新
    function update() {
      ball.x += ball.vx // x轴坐标 vx是x轴的速度,匀速增加
      ball.y += ball.vy  // y轴坐标 由于g的原因,速度是匀变速
      
      // 触底的条件
      if (ball.y >= canvas.height - ball.r) {
        ball.color = color16()
        ball.y = canvas.height - ball.r    // 触下底
        ball.vy = -ball.vy
      } else if (ball.x <= ball.r) {
        ball.color = color16()
        ball.x = ball.r // 触左
        ball.vx = -ball.vx
      } else if (ball.x >= canvas.width - ball.r) {
        ball.color = color16()
        ball.x = canvas.width - ball.r  // 触右
        ball.vx = - ball.vx
      } else if (ball.y <= ball.r) {
        ball.color = color16()
        ball.y = ball.r   // 触上
        ball.vy = -ball.vy
      }
    }
    // 绘制圆形小球
    function render(cxt) {
      // 利用clearRect,清空画布
      cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height)

      cxt.fillStyle = ball.color
      cxt.beginPath()
      //context.arc(圆心横坐标, 原型纵坐标, 半径的长度,绘制的起点, 绘制的终点)
      cxt.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI)
      cxt.closePath()

      cxt.fill()
    }
  </script>
</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 原生js实现弹跳小球

    突发奇想,写了个小球来回弹跳的案例,供大家参考,具体内容如下 主要就是利用了margin-left / top 值进行位移,当然,也可以使用定位去做. 本案例所用到的有: DOM元素获取 DOM样式操作 .offsetWidth 获取元素宽度 .offsetHeight 获取元素高度 setInterval() 定时器 上代码 整体使用原生js <style> //style样式 * { margin: 0; padding: 0; } #box { width: 500px; height:

  • JavaScript+canvas实现框内跳动小球

    JavaScript+canvas实现框内跳动小球

    本文实例为大家分享了JavaScript+canvas实现框内跳动小球的具体代码,供大家参考,具体内容如下 效果如下: 思路: 1.制定画布,确定好坐标2.绘制出圆形小球3.给圆一个原始坐标,xy轴的速度4.每20毫秒刷新一次,达到变化的目的5.判断边缘 全部代码及释义如下: <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <m

  • JavaScript获取文本框内选中文本的方法

    本文实例讲述了JavaScript获取文本框内选中文本的方法.分享给大家供大家参考.具体分析如下: 这里的代码可以用来获取用户通过鼠标在文本输入框或者textarea里选择的选本. 需要注意ie的问题. 代码如下: 复制代码 代码如下: <script type="text/javascript"> function getFieldSelection(select_field) {     word='';     if (document.selection) {   

  • javaScript让文本框内的最后一个文字的后面获得焦点实现代码

    javaScript让文本框内的最后一个文字的后面获得焦点实现代码

    复制代码 代码如下: <script> //当失去交点以后 让文本框内的文字获得焦点 并且光标移到最后一个字后面 function myfocus(myid) { if(isNav){ document.getElementById(myid).focus();// 获取焦点 }else{ setFocus.call(document.getElementById(myid)); } } var isNav = (window.navigator.appName.toLowerCase().i

  • javascript记录文本框内文字个数检测文字个数变化

    最近在做一个项目中遇到这样一个问题,要对文本框中用户输入的文字进行记数,在下面显示出来,因为我们做的是一个短信发送平台,现在我们国家的短信服务,如果你的信息超过了70个字符,短信就会按二条给你下发.所以要求我们给用户显示他输入了多少个字.好便于用户知道我条信息会分几条给出. 在网了一个代码,放上去,开始使用的时候,还行,不错,可是使用了一段时间后发现了问题.就是你在删除文字后,上面的字数变化就有问题,后来研究了一下,找到问题的所在.onKeyDown="showLen(this)" o

  • JavaScript canvas实现跟随鼠标移动小球

    JavaScript canvas实现跟随鼠标移动小球

    本文实例为大家分享了js跟随鼠标移动小球的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> canvas{ border: 1px solid #000; } </style> </head> <body> <canvas

  • javascript文本框内输入文字倒计数的方法

    本文实例讲述了javascript文本框内输入文字倒计数的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>文本框内输入文字倒计数效果</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin maxLen = 100; //定义用户可以输入的最多字数 function checkMaxInput(obj) { if

  • JavaScript实现焦点进入文本框内关闭输入法的核心代码

    js实现焦点进入文本框内关闭输入法:imeMode 要用到的东西: imeMode:xxx 有四个参数 active 代表输入法为中文 inactive 代表输入法为英文 auto 代表打开输入法 (默认) disable 代表关闭输入法 <INPUT onfocus=" this.style.imeMode='active' " /> <INPUT onfocus=" this.style.imeMode='inactive' " /> &

  • javascript canvas检测小球碰撞

    本文实例为大家分享了javascript canvas实现检测小球碰撞的具体代码,供大家参考,具体内容如下 定义一个canvas标签 <div class="cnavasInfo"> <canvas id="canvas" width="800" height="500" ></canvas> </div> 函数以及相关的逻辑处理 export default { data()

  • JavaScript+Canvas实现带跳动效果的粒子动画

    目录 前言 实现过程 运行效果 总结 前言 用 HTML5 的 Canvas 元素实现一个带有跳动效果的粒子动画.会用到 Canvas 的2D渲染上下文,通过 JavaScript 编写绘图代码,实现画布上一系列粒子的随机运动和相互作用.还会使用 CSS3 动画属性,使得画布背景颜色和粒子颜色能够流畅地过渡,达到更加自然的效果. 代码运行效果在底部 实现过程 1.创建 Canvas 元素,并获取其上下文 在实现粒子跳动动画的过程中,第一步需要创建一个 Canvas 元素,并获取其上下文.Canv

  • jQuery 实现鼠标画框并对框内数据选中的实例代码

    jQuery 实现鼠标画框并对框内数据选中的实例代码

    jquery库: jquery -1.10.2.min.js,jQuery UI - v1.12.1. jQuery 代码 不多说了,之间上代码.不懂的地方看注释. <script type="text/javascript"> //鼠标按下时的X Y坐标 var mouseDownX; var mouseDownY; //鼠标按下时移动的X Y 坐标 var mouseMoveX; var mouseMoveY; //移动的状态 var isMove = false; /

随机推荐