vue+canvas 小球连线—

学习案例，记录一下

<template><div><canvas ref="myCanvas" width="800" height="600" id="myCanvas"></canvas></div>
</template><script>
export default {data () {return {}},mounted () {this.onBullConnect()},methods: {onBullConnect() {var canvas = this.$refs.myCanvaslet ctx = canvas.getContext("2d")// 画布的宽度高度// ctx.width = document.documentElement.clientWidth - 10// ctx.height = document.documentElement.clientHeight// ctx.width = 800// ctx.height = 600function Ball () {// 宽高this.x = parseInt(Math.random() * canvas.width)this.y = parseInt(Math.random() * canvas.height)this.r = 10this.color = "red"// 设置行进方向this.dx = parseInt(Math.random() * 10) - 5this.dy = parseInt(Math.random() * 10) -5ballArr.push(this)// 自己在数组中的位置记录一下this.index = ballArr.length - 1}// 小球的更新Ball.prototype.update = function() {this.x += this.dxthis.y += this.dy// 当小球出屏幕，反弹，判断小于this.r是为了判断当前是否出屏幕if (this.x < this.r || this.x > (canvas.width -this.r)) {this.dx = -this.dx}if (this.y < this.r || this.y > (canvas.height-this.r)) {this.dy = -this.dy}}// 小球的渲染Ball.prototype.rander = function() {ctx.beginPath()// 透明度ctx.globalAlpha = 1// 画小球ctx.arc(this.x,this.y,this.r, 0, Math.PI * 2, false)ctx.fillStyle = this.colorctx.fill()// 划线的逻辑 划线只画比自己大的一放就可以了for(var i = this.index; i<ballArr.length; i++) {if (Math.abs(ballArr[i].x - this.x) <150 &&Math.abs(ballArr[i].y - this.y) < 150) {ctx.strokeStyle = "#000"ctx.beginPath()// 增加线的透明度 根据当前已经连续的小球的距离进行线的透明度ctx.globalAlpha = 10 / Math.sqrt(Math.pow(ballArr[i].x - this.x, 2) + Math.pow(ballArr[i].y - this.y, 2) )ctx.moveTo(this.x,this.y)ctx.lineTo(ballArr[i].x,ballArr[i].y)ctx.closePath()ctx.stroke()}}}var ballArr = []// 创建20个小球for (var i = 0;i <20; i++) {new Ball()}// 定时器动画setInterval(function () {// 清除画布ctx.clearRect(0,0,canvas.width,canvas.height)for (var i = 0;i<ballArr.length;i++) {ballArr[i].update()ballArr[i].rander()}},20)}}
}
</script><style>
canvas {display: block;margin: 0 auto;border: 1px solid rgb(43, 37, 37);
}
</style>

vue+canvas 小球连线——碰壁折返相关推荐

canvas小球连线碰撞效果 html+css+js
先看效果(完整代码在底部): canvas小球连线碰撞完整源代码 html+css+js 这是我的B站地址~热烈欢迎实现(看注释,可一步一步跟着实现): 0:定义标签: <h1>北极光之 ...
VUE+Canvas实现简单的五子棋游戏
之前的canvas小游戏系列欢迎大家戳: <VUE实现一个Flappy Bird~~~> <VUE+Canvas实现上吊火柴人猜单词游戏> <VUE+Canvas 实现桌 ...
vue+canvas绘制时间轴
vue+canvas绘制时间轴最近在研究canvas绘制时间轴,直接上代码,希望分享能给大家带来帮助,效果如下: 代码如下,可以拷贝到vue项目中直接预览 <template><d ...
VUE+Canvas 实现桌面弹球消砖块小游戏
大家都玩过弹球消砖块游戏,左右键控制最底端的一个小木板平移,接住掉落的小球,将球弹起后消除画面上方的一堆砖块. 那么用VUE+Canvas如何来实现呢?实现思路很简单,首先来拆分一下要画在画布上的内容 ...
canvas-小球碰壁折返
分析:获取clientWidth .clientHeight,当超出高和宽让其随机累加折返- <!DOCTYPE html> <html lang="en"> ...
移动端html5手写板,Vue+canvas实现移动端手写板步骤详解
这次给大家带来Vue+canvas实现移动端手写板步骤详解,Vue+canvas实现移动端手写板的注意事项有哪些,下面就是实战案例,一起来看一下. 清除保存 Canvas画板 var draw; v ...
canvas绘制飞线效果
在我们做的可视化大屏项目中,经常会遇到飞线的效果. 在我们的大屏编辑器中,可以通过拖拽+配置参数的方式很快就能够实现.下面是我们使用大屏编辑器实现的一个项目效果: 中间地图就有飞线的效果. 抛开编辑器 ...
canvas星空连线背景
<!doctype html> <html lang=en> <head><meta charset="utf-8" /><t ...
Canvas画各种线
Canvas画各种线阅读数:562 在Canvas中绘制路径,最好加上beginPath()和closePath(). 结合lineTo()绘制不同的路径 closePath()方法创建从当前点到开 ...

vue+canvas 小球连线——碰壁折返

vue+canvas 小球连线——碰壁折返相关推荐

最新文章

热门文章