合成キャンバスの絵

<！DOCTYPE HTML > 
< HTML > 
    < ヘッド> 
        < メタのcharset = "UTF-8" > 
        < タイトル> </ タイトル> 
        < スタイル> 
            HTML、本体{ 
                幅：100％ 。
            } 
        </ スタイル> 
    </ ヘッド> 
    < 身体>
        
        < ボタンのonclick = "HEC（）" >合成图片</ ボタン> 
        < スクリプト> 
            関数HEC（）{
                dataurl = ca.toDataURL（" 画像/ PNG " ）。
                console.log（dataurl）
                VAR bigImg = のdocument.createElement（" IMG " ）;
                bigImg.src = dataurl。
                bigImg.style.width = 10 + " ％" 。
                bigImg.style.height = 20 + " ％" 。
                document.body.appendChild（bigImg）。
                // 。のdocument.getElementById（ "你の的のDIV"）のappendChild（bigImg）。
                // $（ "你の的のDIV"）HTML（bigImg）。
            }
             VARのdataurl。
            VaRのIMG1。
            VaRのIMG2。
            // VARのCA =のdocument.getElementById（ 'mycanvas'）; 
            VaRのCA = のdocument.createElement（" キャンバス" ）;
            VaRのCTX = ca.getContext（' 2D ' ）。    
            
        
                
            
            関数のinit（）{
                IMG1 = 新しい画像。
                IMG2 = 新しい画像。
                img1.setAttribute（" crossorigin " 、" Aninomous " ）;
                img2.setAttribute（" crossorigin " 、" 匿名" ）;
                img1.src = " http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLFPJR06vhs1iccMd3hFzJ3GXAFm4VljTErIq6ejH3ZicIvfz9DqKxecXkKlUsZtDYYXOo9h0icQWZDw/0 " 
                img2.src = " https://qnlite.gtimg.com/qqnewslite/20190924/avatar/head1.png "
                    
                
            // するvar IMG1 =のdocument.getElementById（ 'IMG1'）; 
            // するvar IMG2 =のdocument.getElementById（ 'IMG2'）; 
                ca.width = 300 。
                ca.height = 300 。
                img1.onload = 関数（）{
                ctx.drawImage（IMG1、0 、0 、300 、300 ）。
                ctx.drawImage（IMG2、0 、0 、300 、300 ）。
                
                
                }
            
            
            }
            初期化（）;
            
            
            
        </ スクリプト> 
    </ ボディ> 
</ HTML >