js 画布行结束 - Javascript

Javascript提供了一个非常强大的功能——canvas，它可以用来绘制图形，制作动画等等。在canvas中，我们可以通过Javascript通过绘制各种形状来创建一个画布。

创建画布

我们可以通过以下代码来创建一个画布：

const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
document.body.appendChild(canvas);

以上代码创建了一个宽度和高度都为400像素的画布，并将其添加到了body元素中。接下来，我们可以通过以下代码来获取该画布的上下文：

const ctx = canvas.getContext('2d');

绘制形状

我们可以通过canvas提供的API来绘制如下形状：

矩形

我们可以通过以下代码来绘制矩形：

ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);

上述代码绘制了一个在x轴为0, y轴为0,宽度为100, 高度为100的红色矩形。

圆形

我们可以通过以下代码来绘制圆形：

ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(200, 200, 50, 0, 2 * Math.PI);
ctx.fill();

上述代码绘制了一个在x轴为200, y轴为200, 半径为50的蓝色圆形。

直线

我们可以通过以下代码来绘制直线：

ctx.strokeStyle = 'green';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(400, 400);
ctx.stroke();

上述代码绘制了一条从0,0到400,400的绿色直线。

文字

我们可以通过以下代码在canvas上绘制文字：

ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('Hello World', 50, 50);

上述代码在x轴为50, y轴为50的位置处绘制了黑色的20像素Arial字体的文本“Hello World”。

动画

我们可以通过canvas来制作动画，以下代码示范了如何创建一个动画：

let x = 0;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'red';
  ctx.fillRect(x, 0, 100, 100);
  x += 1;
  if (x > canvas.width) {
    x = 0;
  }
  window.requestAnimationFrame(draw);
}

draw();

以上代码将创建一个在画布上循环移动的红色方块动画。

结论

通过本文，我们学习了如何使用Javascript和canvas绘制各种形状，并制作动画。大家可以自己动手尝试绘制更多类型的形状并制作更复杂的动画。