-
-
Save wintercn/3137662 to your computer and use it in GitHub Desktop.
HTML5 Canvas Game Template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <!--允许全屏--> | |
| <meta content="yes" name="apple-mobile-web-app-capable"/> | |
| <meta content="yes" name="apple-touch-fullscreen"/> | |
| <!--禁止电话号码和邮箱识别--> | |
| <meta content="telephone=no,email=no" name="format-detection"/> | |
| <!--TODO:添加一个ios用的icon--> | |
| <link rel="apple-touch-icon" href="favicon.png"/> | |
| <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon" /> | |
| <!--TODO:添加一个网页标题--> | |
| <title>A sample of HTML5 game</title> | |
| <!--TODO:改成你想要的缩放比例--> | |
| <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" /> | |
| <style type="text/css"> | |
| html,body { | |
| margin: 0 0 0 0; | |
| padding: 0 0 0 0; | |
| width:100%; | |
| height:100%; | |
| } | |
| body { | |
| -webkit-user-select: none; | |
| -webkit-tap-highlight-color: rgba(0,0,0,0); | |
| -webkit-touch-callout: none; | |
| -webkit-text-size-adjust: none; | |
| } | |
| body { | |
| display:-webkit-box; | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-pack: center; | |
| -webkit-box-align: center; | |
| text-align:center; | |
| cursor:default; | |
| } | |
| * { | |
| -webkit-text-size-adjust:none; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| //关闭选择 | |
| document.addEventListener("selectstart",function(e){ e.preventDefault(); }); | |
| //避免鼠标变成文本选择形状 | |
| document.addEventListener("mousedown",function(e){ e.preventDefault(); }); | |
| //避免上下滚屏 | |
| document.addEventListener("touchmove",function(e){ e.preventDefault(); }); | |
| </script> | |
| </head> | |
| <body> | |
| <canvas id="main" width="400" height="200"></canvas> | |
| <script type="text/javascript"> | |
| //TODO:此处开始编写游戏初始化代码 | |
| var context = document.querySelector("#main").getContext("2d"); | |
| context.fillRect(0,0,400,200); | |
| </script> | |
| </body> | |
| </html> |
再来几个
<link rel="apple-touch-startup-image" media="screen and (max-device-width: 1024px) and (orientation: landscape)"
href="images/startup-ipad-landscape.png"/>
<!-- iPad Portrait—768x1004 -->
<link rel="apple-touch-startup-image" media="screen and (max-device-width: 1024px) and (orientation: portrait)"
href="images/startup-ipad-portrait.png"/>
<!-- 320x460 for iPhone 3GS, iPod touch -->
<link rel="apple-touch-startup-image"
media="screen and (max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)"
href="images/startup-iphone.png"/>
<!-- 640x920 for retina display -->
<link rel="apple-touch-startup-image"
media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"
href="images/startup-iphone.png"/>
学问很大啊 我擦 感谢大家补充
It's recommend to set the canvas to the size of the full screen to fix pixel to pixel display.
The performance of the canvas will be decreased dramatically if it's scaled om Mobile device.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
< link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon-precomposed.png" />
这个不自动给你图标加高光