Canvas运动

周大胖子 · 发表于 2018-12-12 23:48:23

本帖最后由周大胖子于 2018-12-13 00:15 编辑

基础理念：让元素在canvas上运动起来，需要使用setInterval() ;
canvas 使用了一个特殊的模式，上屏的元素，立刻被像素化，也就是说：上屏幕的元素，胖爷我将得不到这个“对象的”引用。比如，一个圆形滑到一个ctx上面，此时就是一堆像素点，不是一个整体的对象，没有任何变量可以得到这个圆形，也就无法改变这个圆形的属性之类。所以canvas事先通话的原理就是：清屏-》重绘-》清屏-》重绘-》清屏-》重绘-》

注意了，setInterval 只有一个！

在这留一个面向对象的 canvas 构图模式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>canvas画图</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.canvasBox{
border:1px solid #000;
}
</style>
</head>
<body>
<canvas class="canvasBox" id="canvas" width="600" height="400"></canvas>
<br />
测试项目
<script>
var myCanvas = document.getElementById('canvas');
var ctx = myCanvas.getContext("2d");
var canvasArr=[];//绘制一个数组存放需要动画的对象
//构造函数，圆的类
function Boll(x,y,r,speed){
this.x = x; //坐标x
this.y = y; //坐标y
this.r = r; //半径
this.speed = speed; //速度
// 将自己推入数组中
canvasArr.push(this);
}
// 渲染方法
Boll.prototype.render = function()
{
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true);
ctx.fill();
// ctx.stroke()
}
// 更新方法
Boll.prototype.update = function()
{
this.x +=this.speed;
}
let a = new Boll(10,110,30,1);
let b = new Boll(200,100,90,1);
let c = new Boll(20,260,50,10);
setInterval(function(){
ctx.clearRect(0, 0, 600, 400)
for(var i=0; i<canvasArr.length; i++){
canvasArr[i].render();
canvasArr[i].update();
}
}, 20)
</script>
</body>
</html>

复制代码