HTML5 Canvas Games All In One

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

1. clear the canvas.
2. draw the objects in their new position.
3. update the positions based on the logic.
4. 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();
}

collision detection

碰撞检测

live demo

WebGL 3D

Three.js

https://juejin.cn/column/7049923956257587213

refs

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas

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

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

https://www.sololearn.com/Certificate/1140-3476348/jpg

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---