首先定义一张图片,例如:
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;