<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="../../js/jquery-1.12.4.js"></script>

<script src="../../js/public.js"></script>

<style>

canvas {

border: 1px solid red;

display: block;

margin: 50px auto;

</style>

</head>

<canvas id="canvas" width="600" height="600"></canvas>

</body>

<script>

var ctx = canvas.getContext('2d');

function Shark(option) {

// 裁切起点

this.sy = option.sy || 270;

// 绘制起点

this.dx = option.dx;

this.dy = option.dy;

// 绘制大小

this.dw = option.dw;

this.dh = option.dw * 270 / 509;

// 移动速度

this.speed = 1;

Shark.prototype.draw = function (ctx) {

var img = new Image();

img.src = "./shark1.png"

var sy = this.sy;

var dx = this.dx;

var dy = this.dy;

var dw = this.dw;

var dh = this.dh;

$(img).on('load', function () {

ctx.drawImage(this, 0, sy, 509, 270, dx, dy, dw, dh)

Shark.prototype.animation = function () {

if (this.sy == 270 * 7) this.sy = 270;

this.sy += 270;

// Shark.prototype.move = function () {

//     this.dx += this.speed;

//     if (this.dx < 0 || this.dx >= $('#canvas').innerWidth()) {

//         this.speed *= -1;

//     }

var s = new Shark({

sy: 270,

dx: 100,

dy: 100,

dw: 200

// s.draw(ctx);

// setInterval(() => {

//     ctx.clearRect(0, 0, 600, 600);

//     s.draw(ctx)

//     s.animation();

// }, 3 * 1000 / 60)

function animationShark() {

ctx.clearRect(0, 0, 600, 600);

s.draw(ctx)

s.animation();

requestAnimationFrame(animationShark);

animationShark();

</script>

</html>

这个是图片，大佬们

CSDN-Ada助手: 恭喜你写了第一篇博客！虽然标题让人有点疑惑，但这是每个新手都会遇到的问题，不要灰心。祝愿你在写作道路上越来越顺利，希望你能够坚持下去，不断提高自己的写作技巧。 推荐【每天值得看】：https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1