canvas绘制图片、背景图【从0开始学习canvas—第4篇】

最新推荐文章于 2024-06-18 14:08:44 发布

羊二哥

最新推荐文章于 2024-06-18 14:08:44 发布

阅读量2.7k

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/weixin_43586120/article/details/104722771

版权

1、把图像放置到画布上

drawImage(image,x,y,width,height) :

参数说明：

参数 1：要绘制的 img

参数 2、3：绘制的 img 在 canvas 中的坐标

参数 4、5：绘制的 img 在 canvas 中的宽度、高度【可省略，不写则为图片原大小，超出画布部分被裁切】

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image(); //img 可以 new 也可以来源于我们页面的img标签
img.src = 'myImage.png'; // 设置图片源地址

img.onload = function() {
    ctx.drawImage(img,10,10);
} 

//图片撑满全屏，可将后两个参数设为canvas画布的宽高
//ctx.drawImage(img,0,0,canvas.width,canvas.height);