学习笔记——如何在上显示图片

时间:2022-04-18 20:29:26

首先定义一张图片,例如:

var bgPic=new Image();//bgPic是Image类

给出图片的路径:

bgPic.src="./src/background.jpg";//给属性src赋值

加载图片:

ctx=can.getContext("2d");

ctx.drawImage(bgPic,0,0,w,h);//ctx是场景,0,0是指定从什么位置开始加载图片,w,h指定了图片的宽高。


请注意:

drawImage是从图片的(0,0)点开始绘制在指定的画布坐标上的


<canvas>的坐标x轴坐标正方向向右,y轴坐标正方向向下,(0,0)在canvas左上角

若想让图片铺满整个画布,可以直接利用canvas的宽高,获取值的代码如下:

can=document.getElementById("canvas");

w=can.width;

h=can.height;