还记得金碟豹唱片的图标吗？我用canvas实现了它

急需上岸的小鞋
769 阅读2分钟

我正在参加 码上掘金体验活动，详情：show出你的创意代码块

还记得金碟豹唱片的图标吗？我用canvas实现了它

相信九零后们的同学们都看过金碟豹唱片，最经典的莫过于的它的图标从电视这边跳到那边了，那么这个跳动是怎么实现的呢？今天我就用canvas给大家实现下

先看下效果：

code.juejin.cn/pen/7088219…

首先定义画布，画布是正方形的，并显示边框

html部分：

<canvas id="jay" width="500" height="500"></canvas>

css部分：

canvas {
            margin: 0 auto;
            border: 2px solid #94b61b;
            display: block;
        }

这样相当于一个电视剧画好了😋，接下来我们使用canvas画一个圆

ctxJay.beginPath();
ctxJay.arc(x, y, r, 0, Math.PI * 2);

为了让圆能动起来，我们需要通过定时任务的方法不断执行这个画圆的动作

setInterval(function () {
        ctxJay.clearRect(0,0,width,height);
        drawCircle(x, y, r);
    }, 40);

这样就可以不停的进行画圆了，但是有一个问题就是之前画的圆没有被清除，这样会导致之前画的也存在，我们调用clearRect()清除调之前画的圆，这样视觉效果上一个圆就动起来了

小球的反弹

我们还需要做的工作的是，当小球到达边缘的时候实现反弹的效果，这种实现我们可以定义一个速度的变量，正向的速度是正的值，反向的速度就是负的值，有点像物理学的东西了，当到达边界的时候，速度改为相反值就可以了

if (x-r<=0 || x+r>width) {
   xSpeed = -xSpeed;
}
x+=xSpeed;

同理，y的值也是这么变化

可以调节xSpeed ySpeed控制球的速度，当两者速度不一致的时候角度就产生了偏移

图片

加载图片的操作需要我们创建一个Image对象，设置onload事件，调用stroke()方法进行绘制

let img = new Image();
img.src = 'https://xiepanpan123.oss-cn-beijing.aliyuncs.com/图片1.png';
img.onload = () => {
    img.width = 60;
    img.height = 60;

    ctxJay.drawImage(img,x-r, y-r, img.width, img.height);
}
ctxJay.strokeStyle = "orange";
ctxJay.stroke();

添加文字

最后我们再写上金碟豹的文字，大功告成

ctxJay.fillText("金碟豹",x-r/2,y+r+20);

总结

这篇文章主要使用canvas来绘制了一个类似金碟豹logo的效果，主要使用了canvas的画圆的操作和清除功能，还有图片的加载，设置定时任务等功能，你也来试试吧！

avatar
文章
阅读
粉丝