canvas采坑(1)

项目中遇到了需要用canvas合成图片的需求，本来看到网上教程，几句话搞定：

var canvas=document.getElementById("myCanvas");//获取cnavas那个dom
var ctx=canvas.getContext("2d");//貌似是定义为2D
var bg = document.getElementById("scream");//获取id为img的dom
ctx.drawImage(bg,0,0,750,1159);//把图片插入canvas的方法 

然而事实并非这样，当我用本地图片进行调试时，始终加载不了图片。

            var img=new Image();
          /*img.οnlοad=function () {
            console.log(img.width);
            ctx.drawImage(img,0,0);
            var imgData = can.toDataURL('image/png');
            var $img = document.getElementsByClassName('card')[0];
            $img.setAttribute('src', imgData)
          }*/          

        img.src='./assets/img/canvas.png';

img的onload函数始终触发不了。

后来折腾了好久才明白过来，项目是基于webpack构建的，这里写的路径，并不能按我们想的那样去加载。因此需要本地开发时，给本地开一个http-server，使我们能以取服务器图片的方式来调试。

具体做法：

1、npm install http-server -g

安装http-server

2、cd命令转到你的图片文件夹中

3、执行http-server命令，会给你两个链接，就用这个链接访问图片即可解决