画布day3绘制图片
程序员文章站
2024-01-25 20:10:34
...
做动画
绘制图片
-
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 画布中的一个矩形区域
-
三个参数drawImage(img,x,y)
序列帧动画
- 绘制精灵图
- 动起来
- 控制边界
- 键盘控制
坐标变换
-
平移 移动画布的原点
- translate(x,y) 参数表示移动目标点的坐标
-
缩放
- scale(x,y) 参数表示宽高的缩放比例
-
旋转
- rotate(angle) 参数表示旋转角度
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//用法1：三个参数
// 第一个参数：图片对象，后两个参数：图片在画布中的位置 x，y
ctx.drawImage(img,100,100);
//用法2：五个参数 第四个，五个表示图片的宽高，不是裁剪 ，是缩放
ctx.drawImage(img,100,100,200,200);
//用法三：9个参数
// 第一组 ：图片上的定位坐标（x，y） -----就是说从图片的那个位置开始截取
//第二组：截取图片区域的宽高 w，h；
//第三组：绘制图片在画布中的位置（x，y） -------就是说图片在画布的那个位置显示
//第三组：在画布中图片的宽高w，h-------如果和第二组大小一样，就不缩放，如果比第二组大，就放大
ctx.drawImage(img,134,129,200,200,100,100,200,200);
};
</script>
</body>
</html>图片对象
为什么要引入图片对象？
因为做游戏的时候必定会引入很多图片，而引入很多图片用DOM的方式引入，那么就会使得页面上存在很多图片，哪怕是隐藏起来，那这些图片也还在页面上，显得累赘
引入图片对象方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid red;
margin: 100px auto;
display: block;
}
</style>
</head>
<body>
<canvas width="600" height="600"></canvas>
<script>
//获取画布
var canvas = document.querySelector('canvas');
//获取画布上下文,创造一个环境
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function () {
// 不需要在页面上（DOM），图片多了，显得累赘，哪怕影藏，这张图片也在玉面上，所以只需要放在内存上
// 所以需要加载图片
var img = document.createElement('img');
img.src = 'image/01.jpg';
// 当图片没有加载完，是获取不到图片的，所以必须等图片加载完
//由于有加载顺序，有的浏览器图片可能加载完了，再绑定，没必要了，为了兼容，所以把加载事件写在前面
img . onload = function (){
//一定可以使用
};
img.src = 'image/01.jpg';
};
// 加载图片，添加src属性
img.src = 'image/image/01.jpg';
</script>
</body>
一种是通过creatElement创建
一种是通过创建对象的方式创建（建议用这种）