<canvas width="1000" height="600" id="mycanvs"></canvas>
<script>
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
//创建图片
var image = new Image();
//设置图片地址
image.src = 'images/2.jpg'
// 必须要在onLoad之后再进行绘制图片,否则不会渲染
image.onload = function () {
//2个参数 图片的xy坐标
ctx.drawImage(image, 100, 100)
//4各参数 图片的起始坐标和宽高
ctx.drawImage(image, 100, 100, 500, 100)
//参数 408, 81 切片的起始坐标, 147, 182 切片切掉原图的尺寸, 0, 0,切完之后切片的位置400, 400切完之后 切片的大小
ctx.drawImage(image, 408, 81, 147, 182, 0, 0, 400, 400)
}
</script>
ctx.drawImage(image, 100, 100) | ctx.drawImage(image, 100, 100, 200, 120) | ctx.drawImage(image, 408, 81, 147, 182, 200, 200, 147, 182) |
![]() | ![]() | ![]() ![]() |