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

2019-01-28 15:03:28于丽

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

HTML代码

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>   <html lang="en">  
  2.     <head>           <meta charset="utf-8" />  
  3.         <script type="text/javascript" src="chp1_guess_the_letter.js"></script>           <script type="text/javascript" src="modernizr.custom.99886.js"></script>  
  4.     </head>       <body>  
  5.         <canvas id="canvas_guess_the_letter" width="500" height="300">               你的浏览器不支持HTML5 Canvas   
  6.         </canvas>           <form>  
  7.             <input type="button" id="createImageData" value="Export Canvas Image" />;            </form>  
  8.     </body>   </html>  

JS代码

JavaScript Code复制内容到剪贴板
  1. /**    * @author Rafael  
  2.  */   window.addEventListener("load", eventWindowLoaded, false);   
  3.    var Debugger = function() {   
  4.         };   
  5. Debugger.log = function(message) {        try {   
  6.         console.log(message);        } catch(exception) {   
  7.         return;        }   
  8. }      
  9. function eventWindowLoaded() {        canvasApp();