canvas 绘制图片 - ctx.drawImage()

canvas的左上角位置为(0, 0)

ctx.drawImage(图片对象, x位置, y位置)
ctx.drawImage(图片对象, x位置, y位置, 宽度, 高度)
ctx.drawImage(图片对象, 图像裁剪的x位置, 图像裁剪的y位置, 裁剪的宽度, 裁剪的高度, x位置, y位置, 宽度, 高度)

ctx.drawImage(图片对象, x位置, y位置)
图片的原始比例,图片的左上角在画布的(x, y)
ctx.drawImage(图片对象, x位置, y位置, 宽度, 高度)
图片的左上角在画布的(x, y),指定图片的宽高
ctx.drawImage(图片对象, 图像裁剪的x位置, 图像裁剪的y位置, 裁剪的宽度, 裁剪的高度, x位置, y位置, 宽度, 高度)
将图片裁剪出来部分的左上角位于画布的(x,y),且裁剪出来的图像宽高方所到指定的宽高文章来源地址https://www.uudwc.com/A/nPLmy/

<canvas id="canvas1" width="600" height="600"></canvas>
let canvas = document.quertySelector("#canvas1");
let ctx = canvas.getContext('2d');
let img = new Image();
img.src = "*****url";
img.onload = function(){
	ctx.drawImage(img, 0, 0);
}

原文地址:https://blog.csdn.net/qq_44408319/article/details/125868532

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇 2023年10月18日 13:28
【数据结构】排序算法(一)—>插入排序、希尔排序、选择排序、堆排序
下一篇 2023年10月18日 15:28