Skip to content

Instantly share code, notes, and snippets.

@wintercn

wintercn/h5g

Last active May 19, 2017
Embed
What would you like to do?
HTML5 Canvas Game Template
<!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>
@finscn

This comment has been minimized.

Copy link

@finscn finscn commented Jul 19, 2012

通常还有这几个 :

body, div {
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
}

@sunnylqm

This comment has been minimized.

Copy link

@sunnylqm sunnylqm commented Jul 19, 2012

var CANVAS_CSS_WIDTH = 400;
var CANVAS_CSS_HEIGHT = 200;
var BACKING_SCALE;

function backingScale(context) {
//新增context.webkitBackingStorePixelRatio,判断是否auto-doubled
if (window.devicePixelRatio > 1 &&
context.webkitBackingStorePixelRatio < 2) {
return window.devicePixelRatio;
}
return 1;
}
function init() {
var canvas = document.getElementById("#main");
var context = canvas.getContext("2d");

BACKING_SCALE = backingStore(context);

canvas.width = BACKING_SCALE * CANVAS_CSS_WIDTH;
canvas.height = BACKING_SCALE * CANVAS_CSS_HEIGHT;
}

@FlashSoft

This comment has been minimized.

Copy link

@FlashSoft FlashSoft commented Jul 19, 2012

< link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon-precomposed.png" />
这个不自动给你图标加高光

@FlashSoft

This comment has been minimized.

Copy link

@FlashSoft FlashSoft commented Jul 19, 2012

再来几个

<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"/>
@snda-chengshaofei

This comment has been minimized.

Copy link

@snda-chengshaofei snda-chengshaofei commented Jul 19, 2012

学问很大啊 我擦 感谢大家补充

@YuJianrong

This comment has been minimized.

Copy link

@YuJianrong YuJianrong commented Jul 19, 2012

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
You can’t perform that action at this time.