添加H5原生控件

 

图片控件（可用于长按保存）

        let img = document.createElement("img");
        //img.src = this.asset.nativeUrl; //图片路径
        img.src = dataURL;  //截图数据

        let divGame = document.getElementById("Cocos2dGameContainer");
        img.id = "capture";
        img.alt = "capture";
        img.width = cc.winSize.width;
        img.height = cc.winSize.height;
        img.style.position = "absolute";
        img.style.top = 0;
        img.style.left = 0;

        divGame.appendChild(img);

        //删除
        //divGame.removeChild(img);

按钮控件（可现实在videoplayer上）

    //按钮图片资源
    @property({type: cc.Texture2D})
    assetNormal:cc.Asset = null;
    @property({type: cc.Texture2D})
    assetPress:cc.Asset = null;

 

        let divGame = document.getElementById("Cocos2dGameContainer");
        let button = document.createElement("img");
        button.src = this.assetNormal.nativeUrl;
        button.id = "button";
        //button的锚点为左上角
        button.width = 195;
        button.height = 270;
        button.style.position = "absolute";
        button.style.top = "40%";
        button.style.left = "40%";
        button.onclick = function(){ 
            button.src = this.assetNormal.nativeUrl;
            alert("onclick"); 
        }.bind(this);
        button.onmousedown = function(){ 
            button.src = this.assetPress.nativeUrl;
        }.bind(this);

        divGame.appendChild(button);

选择文件控件

        let divGame = document.getElementById("Cocos2dGameContainer");
        let select = document.createElement("input");
        select.type = "file";
        select.accept = ".xls,.doc,.txt,.pdf";
        select.id = "select_file";
        select.onchange = function(){
            let file = select.files[0];  
            console.log(file);
            divGame.removeChild(select);
        }.bind(this);
        select.style.opacity = "0";
        select.style.width = "0";
        select.style.height = "0";

        divGame.appendChild(select);
        select.click(); 

转载于:https://my.oschina.net/valiancer/blog/2996177