快速网站建设一站式网络营销
canvas有三种用法
- 三参数
context.drawImage(img,x,y)
img: 要使用的图像、画布、视频
x：在画布上放置图像的x坐标
y：在画布上放置图像的y坐标
例子
HTML:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><img id="picture" src="./cloud.png" alt="test" /><canvas id="canvas" style="border:1px solid #aaa; display:block; margin:50px"></canvas><script>window.onload = function() {var canvas = document.getElementById("canvas");canvas.width = 400;canvas.height = 400;var context = canvas.getContext("2d")var pic = document.getElementById("picture")context.drawImage(pic,0,0)//context.drawImage(pic,20,0) 下图展示//context.drawImage(pic,100,0) 下图展示}</script>
</body>
</html>
参数中的x，y只会控制图像在canvas中开始画的位置
- 五参数 可以进行图片缩放
context.drawImage(img,x,y,width,height);
img: 要使用的图像、画布、视频
x：在画布上放置图像的x坐标
y：在画布上放置图像的y坐标
width：在canvas里画出的图像的宽（可以理解为缩放
height：在canvas里画出的图像的高（可以理解为缩放
可以实现一些缩放的需求
在代码中这样写
context.drawImage(pic,0,0,100,100)//会使图像缩成一个100*100
- 九参数 可以进行图片裁剪+缩放
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
！！！这个方法用一句话总结就是：先裁剪再缩放！
在一个图上（sx，sy）位置开始，裁剪出一个宽为swidth，高为sheight的图，然后按照width*height的尺寸进行缩放，在canvas的（x，y）位置开始画出来
img: 要使用的图像、画布、视频
sx：在原图上开始裁剪的x坐标位置
sy：在原图上开始裁剪的y坐标位置
swidth：要从原图上裁出的宽度
sheight：要从原图上裁出的高度
x：在画布上放置图像的x坐标
y：在画布上放置图像的y坐标
width：在canvas里画出的图像的宽（可以理解为缩放
height：在canvas里画出的图像的高（可以理解为缩放
在代码中这样写
context.drawImage(pic,0,0,172,314,0,0,86,157)
可以看出图像是在原图的（0，0）位置裁剪出172314的图，然后将这个裁剪好的图画在canvas的（0，0）位置，缩放成86157的尺寸
也就是 先裁剪再缩放！
代码这样写，也就是按照172*314进行裁剪，按照原尺寸画出来（没有缩放）
context.drawImage(pic,0,0,172,314,0,0,172,314)
