有关于cocos js加载网络图片

1.预加载

在说加载网络图片之前，我们来先说说，cocos js的预加载，在cocos-html中在图片的一些操作之前是要先要预加载图片资源，不然有一些操作是无效的，比如通过getContensize()获取图片的大小，设置锚点等等，当然在window平台和ios、android平台是没有这个问题。

2.区别于openGL、webGL、canvas

webGL是一组用于在web页面绘制3D图形(动画)的API,继承自OpenGL® ES规范,提供了与其类似的渲染功能,区别在于webGL在html上下文中绘制.

webGL为渲染html中的Canvas对象而设计,HTML Canvas提供了一张可以用来渲染的画布,负责呈现不同的API绘制的效果.所以说canvas的api继承至webGL,真是这种特性，在html上其实webGL和canvas还是有区别的！等到到下面我将会说到这个区别！

3.cocos js加载网络图片

loadImgFromUrl: function (target, imgUrl, p, tag) {
if(!imgUrl)return;
var self = target;
var loadCb = function(err, img){
if(err) return;
cc.textureCache.addImage(imgUrl);
var texture2d = new cc.Texture2D();
texture2d.initWithElement(img);
texture2d.handleLoadedTexture();
var sp = new cc.Sprite();
sp.initWithTexture(texture2d);
self.addChild(sp);
sp.x = p.x;
sp.y = p.y;
sp.tag = tag;
};
cc.loader.loadImg(imgUrl, {isCrossOrigin:false }, loadCb);
},用上面的方法理论上可以用来加载网络图片才对，但是实际上在浏览器中调试却是TexturesWebGL.js:470 Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext':
The cross-origin image at /pic/thumb_57b6d3d36d3b1.jpg may not be loaded.报这样的错误！我刚开始也是很纳闷，以为是什么跨域啊！等等等等，后面参考canvas和webGl的区别突然明白了，webgl不能使用网络图片的纹理加载，在cocos-html中默认是使用自动获取渲染的模式的,也就是它会优先使用webgl,正式如此，所以问题的解决方案一中是先把网络图片下载到本地然后使用，但是这个很不合实际，在cocos js里面的project.json文档里面设置

renderMode："1",

设置为canvas模式，使用就可以了！