image-rendering: pixelated;
context.imageSmoothingEnabled = false;
gl.texParameteri(
gl.TEXTURE_2D,
gl.TEXTURE_MIN_FILTER,
gl.NEAREST)
gl.texParameteri(
gl.TEXTURE_2D,
gl.TEXTURE_MAG_FILTER,
gl.NEAREST)
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=0"/>
<style>
...
</style>
</head>
<body>
<canvas id="Game">Sorry, no game for you.</canvas>
<script>
...
</script>
</body>
</html>
html, body {
margin: 0; padding: 0;
overflow: hidden;
-ms-touch-action: none;
}
canvas {
position: fixed;
width: 100%;
height: 100%;
}
'use strict'
var canvas,
ctx,
width,
height,
now,
factor,
last,
pointersLength = 0,
pointersX = [],
pointersY = [],
keysDown = []
function draw() {}
function run() {}
function init() {}
function init() {
if (!(canvas = document.getElementById('Game')) ||
!(ctx = canvas.getContext('2d'))) {
return
}
window.onresize = resize
resize()
...
last = Date.now() - 16
run()
}
function resize() {
canvas.width = width = window.innerWidth
canvas.height = height = window.innerHeight
...
}
function run() {
requestAnimationFrame(run)
now = Date.now()
factor = (last - now) / 16
last = now
input()
draw()
}
function input() {
if (pointersLength > 0) {
move(pointersX[0] > playerX ? step : -step)
} else if (keysDown[37]) {
move(-step)
} else if (keysDown[39]) {
move(step)
}
}
function draw() {
ctx.fillRect(0, 0, width, height)
...
}
var D = document
D.onmousedown = pointerDown
D.onmousemove = pointerMove
D.onmouseup = pointerUp
D.onmouseout = pointerUp
if ('ontouchstart' in D) {
D.ontouchstart = pointerDown
D.ontouchmove = pointerMove
D.ontouchend = pointerUp
D.ontouchleave = pointerUp
D.ontouchcancel = pointerUp
}
function pointerUp(event) {
setPointer(event, false)
}
function pointerMove(event) {
setPointer(event, pointerLength)
}
function pointerDown(event) {
setPointer(event, true)
}
function setPointer(event, down) {
if (!down) {
pointersLength = event.touches ? event.touches.length : 0
} else if (event.touches) {
var touches = event.touches
pointersLength = touches.length
for (var i = pointersLength; n--;) {
var t = touches[n];
pointersX[i] = t.pageX
pointersY[i] = t.pageY
}
} else {
pointersLength = 1
pointersX[0] = event.pageX
pointersY[0] = event.pageY
}
event.preventDefault()
}
var D = document
D.onkeydown = keyDown
D.onkeyup = keyUp
function setKey(event, down) {
keysDown[event.keyCode] = down
event.preventDefault()
}
function keyUp(event) {
setKey(event, false)
}
function keyDown(event) {
setKey(event, true)
}
ctx.drawImage(sprite, x | 0, y | 0)
object.a.b.c()
array[0][0][0]
var a = object.a,
b = a.b
b.c()
object = []
object = {}
new Object()
ctx.drawImage(sprite, x | 0, y | 0)
function scheduleResize() {
if (resizeTimer) {
clearTimeout(resizeTimer)
}
resizeTimer = setTimeout(resize, 200)
}
document.onresize = scheduleResize
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
{
"name": "...",
"installs_allowed_from": ["*"],
"fullscreen": "true"
...
}
{
"start_url": "index.html",
"display": "standalone"
...
}
ctx.drawImage(
src, sx, sy, sw, sh,
dst, dx, dy, dw, dh)
ratio =
(window.devicePixelRatio || 1) /
(ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio ||
1)
width = window.innerWidth * ratio | 0
height = window.innerHeight * ratio | 0
for (var i = 0; i < pointerLength; ++i) {
pointersX[i] = pointersX[i] * ratio | 0
pointersY[i] = pointersY[i] * ratio | 0
}
ctx.getContext("2d", {alpha: false})
// avoid state changes
ctx.save()
...
ctx.restore()
// group by path
ctx.beginPath()
...
ctx.closePath()
// group by fillStyle
ctx.fillStyle = “red”;