canvas的左上角位置为(0, 0)
文章来源:https://www.toymoban.com/news/detail-686912.html
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.toymoban.com/news/detail-686912.html
<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);
}
到了这里,关于canvas 绘制图片 - ctx.drawImage()的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!