如何使用canvas绘画

canvas是HTML5中的一个标签，可以用于绘制图形，动画，甚至是游戏。使用canvas绘画需要以下步骤：

1.在HTML文件中添加canvas标签，并设置宽高等属性。

<canvas id="myCanvas" width="200" height="100"></canvas>

2.在JavaScript文件中获取canvas元素，并获取其上下文。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

3.使用上下文对象ctx进行绘画操作，例如绘制矩形、圆形、直线等。

// 绘制矩形
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);

// 绘制圆形
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

// 绘制直线
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

4.最后，将绘制好的图形显示在canvas上。

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