HTML5 Canvas Games All In One

Canvas

text

window.onload = function() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    context.fillText("Hello World", 200, 100); 
};

Line 线型

context.moveTo(x, y);
context.LineTo(x, y);
context.stroke();

Rect 矩形

context.rect(startX, startY,  endX, endY);

Circle 圆形

context.arc(centerX, centerY, radius, startingAngle, 2 * Math.PI, counterclockwise);  
context.arc(300, 200, 100, 0, 2 * Math.PI);

Path2D

function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    const rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);

    const circle = new Path2D();
    circle.arc(100, 35, 25, 0, 2 * Math.PI);

    ctx.stroke(rectangle);
    ctx.fill(circle);
  }
}

https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D

Arc 弧形

context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);

context.arc(150, 150, 100, 0, 1 * Math.PI);
context.stroke();

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

Radians 弧度

180° is equal to PI * radians.

PI is the mathematical constant, which is approximately equal to 3.14159.

stroke vs fill

context.rect(50, 50, 100, 100);
context.strokeStyle = "yellow";
context.stroke();

context.rect(50, 50, 100, 100);
context.fillStyle = "yellow";
context.fill();

Image

var img = new Image();
img.src = 'https://blob.sololearn.com/avatars/sololearn.jpg'; 


context.drawImage(img, x, y, width, height); 

context.imageSmoothingEnabled = false;

clearRect 清除画布

CanvasRenderingContext2D.clearRect() 是 Canvas 2D API 的方法，这个方法通过把像素设置为透明以达到擦除一个矩形区域的目的。

window.onload = function() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var x = 0;
    var y = 100;
    
    function draw() {
        context.clearRect(0, 0, 600, 400);
        
        context.beginPath();
        context.rect(x, y, 100, 100);
        context.fillStyle="red";
        context.fill();

        x += 10;
        if (x >= 600) {
            x = -100;
        }
    }
    setInterval(draw, 50);
}

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/clearRect

canvas animation steps

clear the canvas.
draw the objects in their new position.
update the positions based on the logic.
repeat the process.

js 性能优化 `window.requestAnimationFrame`

Game Loops

https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame

https://www.cnblogs.com/xgqfrms/tag/requestAnimationFrame/

window.onload = function() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var x = 0;
    var y = 100;
    
    function draw() {
        context.clearRect(0, 0, 600, 400);
        
        context.beginPath();
        context.rect(x, y, 100, 100);
        context.fillStyle="red";
        context.fill();

        x += 10;
        if (x >= 600) {
            x = -100;
        }
        window.requestAnimationFrame(draw);
    }
    draw();
}