学习如何使用canvas标签的常见属性

<canvas id="myCanvas" width="500" height="300"></canvas>

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.fillStyle = "red";
context.fillRect(50, 50, 200, 100);

context.beginPath();
context.arc(250, 150, 50, 0, 2 * Math.PI);
context.fillStyle = "blue";
context.fill();

context.moveTo(100, 100);
context.lineTo(300, 200);
context.strokeStyle = "green";
context.lineWidth = 5;
context.stroke();

context.font = "30px Arial";
context.fillStyle = "purple";
context.fillText("Hello, Canvas!", 100, 100);

context.font = "30px Arial";
context.strokeStyle = "orange";
context.lineWidth = 3;
context.strokeText("Hello, Canvas!", 100, 100);

var img = new Image();
img.src = "image.png";
img.onload = function() {
    context.drawImage(img, 100, 100);
}

context.clearRect(0, 0, canvas.width, canvas.height);

function draw() {
    // 清空画布
    context.clearRect(0, 0, canvas.width, canvas.height);
  
    // 绘制动画元素
    // ...
  
    // 更新元素属性
  
    // 循环调用draw函数
    requestAnimationFrame(draw);
}