计算机 JS画图用哪些canvas

在本文中，我们将介绍计算机中使用JavaScript绘制图形所用到的canvas元素。

什么是canvas

Canvas是HTML5中的一个元素，它可以用来绘制图形，包括线条、文字、矩形、圆形等等。通过JavaScript，我们可以动态地创建和修改Canvas上的图形，使得我们能够在网页中实现丰富多样的图形效果。

canvas的创建和配置

在使用canvas之前，我们需要首先创建一个canvas元素并进行相应的配置。以下是创建canvas元素并设置宽度、高度和背景色的示例代码：

<canvas id="myCanvas" width="500" height="300" style="background-color: #f1f1f1;"></canvas>

在上述代码中，id属性为”myCanvas”的canvas元素被创建，并设置宽度为500px，高度为300px，背景色为浅灰色。

使用JavaScript绘制图形

在canvas上绘制图形的主要方式是通过使用JavaScript中的Canvas API来实现。下面我们将介绍几种常见的图形绘制方法。

绘制线条

通过使用Canvas API中的lineTo()方法，我们可以在canvas上绘制直线。以下是一个绘制线条的示例代码：

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

context.beginPath();  // 开始绘制路径
context.moveTo(50, 50);  // 移动到起点坐标 (50, 50)
context.lineTo(200, 200);  // 绘制一条到终点坐标 (200, 200) 的线
context.strokeStyle = "red";  // 设置线条颜色为红色
context.lineWidth = 5;  // 设置线条宽度为5像素
context.stroke();  // 绘制线条

在上述代码中，我们首先获取到id为”myCanvas”的canvas元素，并创建了一个绘图上下文对象。然后，通过调用beginPath()方法开始绘制路径，接着使用moveTo()方法将绘制起点移动到坐标 (50, 50)，再调用lineTo()方法绘制一条到坐标 (200, 200) 的线条。最后，我们设置线条的颜色为红色，宽度为5像素，并调用stroke()方法将线条绘制在canvas上。

绘制矩形

通过使用Canvas API中的rect()方法，我们可以在canvas上绘制矩形。以下是一个绘制矩形的示例代码：

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

context.beginPath();  // 开始绘制路径
context.rect(100, 100, 200, 150);  // 绘制一个矩形，起点坐标为 (100, 100)，宽度为200，高度为150
context.fillStyle = "blue";  // 设置填充颜色为蓝色
context.fill();  // 填充矩形
context.lineWidth = 2;  // 设置边框宽度为2像素
context.strokeStyle = "black";  // 设置边框颜色为黑色
context.stroke();  // 绘制边框

在上述代码中，我们同样先获取到canvas元素和绘图上下文对象。然后，通过调用beginPath()方法开始绘制路径，接着使用rect()方法绘制一个起点坐标为 (100, 100)、宽度为200，高度为150的矩形。我们还设置了矩形的填充颜色为蓝色，并调用fill()方法进行填充，最后通过设置边框宽度和颜色，并调用stroke()方法绘制矩形的边框。

绘制圆形

通过使用Canvas API中的arc()方法，我们可以在canvas上绘制圆形。以下是一个绘制圆形的示例代码：

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

context.beginPath();  // 开始绘制路径
context.arc(250, 150, 100, 0, 2 * Math.PI);  // 绘制一个圆形，圆心坐标为 (250, 150)，半径为100
context.fillStyle = "yellow";  // 设置填充颜色为黄色
context.fill();  // 填充圆形
context.lineWidth = 2;  // 设置边框宽度为2像素
context.strokeStyle = "black";  // 设置边框颜色为黑色
context.stroke();  // 绘制边框

在上述代码中，我们同样先获取到canvas元素和绘图上下文对象。然后，通过调用beginPath()方法开始绘制路径，接着使用arc()方法绘制一个圆形，圆心坐标为 (250, 150)，半径为100。我们还设置了圆形的填充颜色为黄色，并调用fill()方法进行填充，最后通过设置边框宽度和颜色，并调用stroke()方法绘制圆形的边框。

总结

使用canvas元素和JavaScript的Canvas API，我们可以在网页中实现丰富多样的图形效果。通过lineTo()方法可以绘制直线，通过rect()方法可以绘制矩形，通过arc()方法可以绘制圆形。我们还可以通过设置填充颜色和边框样式来实现更多绘制效果。希望本文对你了解canvas的基本用法有所帮助！