前端开发 canvas加载 动画

加载很快的前端开发ide|html5前端开发论坛|html前端开发 快捷键
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发自动生成html:canvas动画序</title>
</head>
<body>
    <canvas id=”canvas” width=”500″ height=”400″ style=”background: #f7f7f7;”>
        <p>您的浏览器不支持canvas!</p>
    </canvas>
</body>
<script>
    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加载 动画》
» 本文链接地址:https://www.rokub.com/4776.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!