兔兔撞墙记

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

祝你兔年快乐，鸡犬升天，财源滚滚，吉祥如意！
Wishing you a happy Year of the Rabbit,with good luck luck and prosperity !!!

---

这是码上掘金的项目地址：兔兔撞墙
页面展示：

---

首先：第1步

利用canvas元素设计一个宽800px，高400px的画布绘制图形，id为rabbit,并编写行内元素使画布放置在页面中间位置。

 <div style='display: flex; align-items: center; justify-content: center;'>
        <canvas id="rabbit" width="800" height="400">
        </canvas>
 </div>

随后设计canvas的css样式

具体如下：

<style>
        body {
            background: -webkit-linear-gradient(to right, #ff5e62, #ff9966);
            background: linear-gradient(to right, #ff5e62, #ff9966);
        }

        canvas {
            background-image: url("./img/carrot.png");
            background-color: greenyellow;
            background-repeat: no-repeat;
            background-position: center;
            border: 1px solid orangered;
            margin-top: 40px;
        }
    </style>

css设计了页面的背景颜色，并且有渐变的效果。然后将canvas设计了一个胡萝卜的背景图片，边框为1px solid orangered效果。

---

JavaScript中的具体实现

1. 使用 id 来寻找 canvas 元素

2. 创建 context 对象

let canvas = document.getElementById("rabbit");
let ctx = canvas.getContext("2d");

3. 设置兔子的图片

let image = new Image();<br>
image.src = "img/rabbit.png"; 

4. 设置兔子的移动位置和移动速度

let x = 0;
let y = 0;
let dx = 2;
let dy = 2;

5. 设置兔子撞到墙回弹的效果

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, x, y);
x += dx;
y += dy;
if (x > canvas.width || x < 0) dx = -dx;
if (y > canvas.height || y < 0) dy = -dy;
}
setInterval(draw, 10);

---

总结

这个特效是想过做的更好点，但是还没想到更好的出发点，所以这个动效还有待完善，希望jym能够提点意见。

兔年祝你财运亨通，万事如意，合家幸福！