canvas小案例（小动画）

最新推荐文章于 2022-06-13 21:22:33 发布

清风无虑skr

最新推荐文章于 2022-06-13 21:22:33 发布

阅读量429

点赞数 1

文章标签：前端 javascript canvas html5 github

本文链接：https://blog.csdn.net/weixin_43889532/article/details/103950192

版权

canvas小案例（小动画）

案例简介

刚开始学canvas动画，简单的线条绘图已经掌握，想学下动画，所以写这个来练练手，写的不是太好，用到的精灵图是在网上找的QQ企鹅，通过裁剪精灵图且依次显示达到动画的效果。

精灵图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
<canvas width="800" height="800" style="border: 1px solid red"></canvas>
<script>
    var canvas=document.querySelector('canvas')
    var ctx=canvas.getContext('2d')
    var image = new Image();
    image.onload = function () {

        var imageWidth=image.width;
        var imageHeight=image.height;
        var qqwidth=imageWidth/6;
        var qqheight=imageHeight/2;
        var index=0;
        var x0=ctx.canvas.width/2-qqwidth/2;
        var y0=ctx.canvas.height/2-qqheight/2;
        ctx.drawImage(image,0,0,qqwidth,qqheight,x0,y0,qqwidth,qqheight);
        setInterval(function () {
            index ++;
            ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
            ctx.drawImage(image,index*qqwidth,0,qqwidth,qqheight,x0,y0,qqwidth,qqheight);
            if(index>=5){
                index=0;
            }
            },100)

    };
    image.src='timg.jpg'
</script>
</body>
</html>

动态图如图：

清风无虑skr

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
canvas小案例（小动画）

canvas小案例案例简介刚开始学canvas动画，简单的线条绘图已经掌握，想学下动画，所以写这个来练练手，写的不是太好，用到的精灵图是在网上找的QQ企鹅，通过裁剪精灵图且依次显示达到动画的效果。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫