前端开发 canvas加载动画

加载很快的前端开发ide|html5前端开发论坛|html前端开发快捷键

html 代码

<!DOCTYPE html>

<head>

<title>前端开发自动生成html:canvas动画序</title>

</head>

<body>

<p>您的浏览器不支持canvas！</p>

</canvas>

</body>

window.onload = function () {

var canvas = document.getElementById(‘canvas’), //获取canvas元素

context = canvas.getContext(‘2d’), //获取画图环境，指明为2d

centerX = canvas.width / 2, //canvas中心点x轴坐标

centerY = canvas.height / 2, //canvas中心点y轴坐标

rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度

speed = 0.1; //加载的快慢就靠它了(速度)

//百分比文字绘制

function text(n) {

context.save();

context.fillStyle = ‘#f47c7c’;

context.font = ’40px Arial’;

context.textAlign = ‘center’;

context.textBaseline = ‘middle’;

context.fillText(n.toFixed(0) + ‘%’, centerX, centerY);

context.restore();

}

//绘制蓝色的外圈

function blueCircle(n) {

context.save();

context.beginPath();

context.strokeStyle = “#49f”;

context.lineWidth = 12;

context.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false);

context.stroke();

context.restore();

}

//绘制白色的外圈

function whiteCircle() {

context.save();

context.beginPath();

context.strokeStyle = “#A5DEF1”;

context.lineWidth = 12;

context.arc(centerX, centerY, 100, 0, Math.PI * 2, false);

context.stroke();

context.closePath();

context.restore();

}

//动画循环

(function drawFrame() {

//requestAnimationFrame是一个新的API,作用与setTimeInterval一样，不同的是它会根据浏览器的刷新频率自动调整动画的时间间隔。

window.requestAnimationFrame(drawFrame, canvas);

context.clearRect(0, 0, canvas.width, canvas.height);

whiteCircle();

text(speed);

blueCircle(speed);

if (speed > 100) speed = 0;

speed += 0.1;

}());

}

</script>

</html>

ps：最后一些关于canvas动画的一些笔记

#####*速度与加速度***

//@speed：速度 @angle: 角度

//任意方向速度

vx = speed Math.cos(angle);

vy = speed Math.sin(angle);

//任意方向加速度

ax = force Math.cos(angle);

ay = force Math.xin(angle);

//改变速度

vx += ax;

vx += ay;

//改变位置

object.x += vx;

object.y += vy;

#####*边界检测与摩擦力*****

//设置边界

var left = 0,

top = 0,

right = canvas.width,

bottom = canvas.height;

//超出边界

ball.x – ball.radius > canvas.width

ball.x 球的圆心

//角度与速度的计算

//假设速度水平和垂直方向分别为vx, vy;

var angle = Math.atan(vy, vx); //角度

var speed = Math.sqrt(vxvx + vyvy); //运动的总速度

// 1.移除一个超过边界的物体

if(object.x – object.width/2 > right ||

object.x + object.width/2 < left ||

object.y – object.height/2 > bottom ||

object.y + object.height/2 < top){

//移除物体代码

}

// 2.重现一个超出边界的物体

if(object.x – object.width/2 > right ||

object.x + object.width/2 < left ||

object.y – object.height/2 > bottom ||

object.y + object.height/2 < top){

//重新设置对象的位置和速度

}

//3. 边界环绕

if(object.x – object.width/2 > right){

object.x = left – object.width/2;

}else if(object.x + object.width/2 < left){

object.x = object.width/2 + right；

}

if(object.y – object.height/2 > bottom){

object.y = top – object.height/2;

}else if(object.y + object.height/2 < top){

object.y = object.height/2 + bottom；

}

//4.摩擦力(正规军)

speed = Math.sqrt(vx*vx + vy*vy);

angle = Math.atan2(vy, vx);

if(speed > f){

speed -= f;

}else{

speed = 0;

}

vx = Math.cos(angle)*speed;

vy = Math.sin(angle)*speed;

//4.摩擦力(野战军)

vx *= f;

vy *= f;

#####****移动物体*****

//判别鼠标是否落在物体上

①外接矩形判别法

1.mouse.x > rect.x

2.mouse.x < rect.x + rect.width

3.mouse.y > rect.y

4.mouse.y < rect.y + rect.height

②外接圆判别法

//鼠标距球心的距离

dx = mouse.x – ball.x;

dy = mouse.y – ball.y;

dist = Math.sqrt(dx dx + dy dy)

if(dist < ball.radius){

//碰上了

}

③多边形和不规则图形

…略…

//得到球体坐标

Ball.prototype.getBounds = function(){

return{

x: this.x – this.radius,

y: this.y – this.radius,

width: this.radius2,

height: this.radius2

};

}

//捕获物体

utils.containsPoint = function(rect, x, y){

return !(x<rect.x || x>rect.x + rect.width ||

y<rect.y || y>rect.y + rect.height);

}

//物体的移动拖拽

canvas.addEventListener(“mousedown”, function(event){

if(utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)){

….

canvas.addEventListener(‘mouseup’, onMouseUp, false);

canvas.addEventListener(‘mousemove’, onMouseMove, false);

}

},false);

*****缓动动画****

easing就是我们设定的缓动参数，每一帧都乘以距离，随着距离的不断减小，速度也就不断减小

//easing 缓动参数 targetX 设定的目标位置 vx 运动的速度

vx = (targetX – ball.x)* easing;

①缓动动画

var dx = targetX – object.x,

dy = targetY – object.y;

var vx = dx easing,

vy = dy easing;

object.x += vx;

object.y += vy;

②缓动动画，精简模式

object.x += ()

前端开发html原理|会前端开发的就会h5开发吗|html5前端编程开发课程

前端开发 canvas加载动画

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发