借助HTML5 Canvas API制作一个简单的猜字游戏

2020-04-22 06:35:08易采站长站整理

二话不说,先上效果图以及源代码~
2016325105351695.png (535×346)

HTML代码

XML/HTML Code复制内容到剪贴板

<!doctype html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8" />  
        <script type="text/javascript" src="chp1_guess_the_letter.js"></script>  
        <script type="text/javascript" src="modernizr.custom.99886.js"></script>  
    </head>  
    <body>  
        <canvas id="canvas_guess_the_letter" width="500" height="300">  
            你的浏览器不支持HTML5 Canvas   
        </canvas>  
        <form>  
            <input type="button" id="createImageData" value="Export Canvas Image" />;   
        </form>  
    </body>  
</html>  

JS代码

JavaScript Code复制内容到剪贴板

/**  
 * @author Rafael  
 */  
window.addEventListener("load", eventWindowLoaded, false);   
  
var Debugger = function() {   
       
};   
Debugger.log = function(message) {   
    try {   
        console.log(message);   
    } catch(exception) {   
        return;   
    }   
}   
  
function eventWindowLoaded() {   
    canvasApp();   
}   
  
function canvasSupport() {   
    return Modernizr.canvas;   
}   
  
function canvasApp() {