用canvas轻松上手做动画

最新推荐文章于 2024-07-27 10:35:41 发布

空白

最新推荐文章于 2024-07-27 10:35:41 发布

阅读量1.4k

点赞数 1

分类专栏：学习文章标签： html5

本文链接：https://blog.csdn.net/qq_38496329/article/details/107727529

版权

本文介绍了如何使用HTML5的Canvas元素进行动画制作，包括绘制图片的三种方法：drawImage()的三个、五个和九个参数的使用，以及如何创建帧动画。此外，还讲解了如何通过键盘方向键控制在帧动画中的人物移动。

摘要由CSDN通过智能技术生成

绘制图片

绘制图片有三种方法，分别是不同的参数对img对象进行绘制操作

drawImage()
- 三个参数drawImage(img,x,y)
  - img 图片对象、canvas对象、video对象
  - x,y 图片绘制的左上角
- 五个参数drawImage(img,x,y,w,h)
  - img 图片对象、canvas对象、video对象
  - x,y 图片绘制的左上角
  - w,h 图片绘制尺寸设置(图片缩放，不是截取)
- 九个参数drawImage(img,x,y,w,h,x1,y1,w1,h1)
  - img 图片对象、canvas对象、video对象
  - x,y,w,h 图片中的一个矩形区域
  - x1,y1,w1,h1 画布中的一个矩形区域

三个参数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
    
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.加载图片到内存即可*/
    /*创建对象*/
    var image = new Image();
    /*绑定加载完成事件*/
    image.onload = function () {
    
        /*实现图片绘制*/
        console.log(image);
        /*3参数*/
        /*图片对象*/
        /*绘制在画布上的坐标 x y*/
        ctx.drawImage(image,100,100);
    };
    /*设置图片路径*/
    image.src = 'image/01.jpg';

</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FAXmHEpD-1596250277749)(https://ftp.bmp.ovh/imgs/2020/08/6b0407c1603376ae.png)]

五个参数：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
    
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <canvas width="600" height="400"></canvas>
    <script>
        var myCanvas = document.querySelector('canvas');
        var ctx = myCanvas.getContext('2d');
        /*