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

首先定义一张图片，例如：

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;