HTML canvas图形一般分为哪些类型

在本文中，我们将介绍HTML canvas图形的几种常见类型。

阅读更多：HTML 教程

直线(Line)

直线是最基本的图形类型之一，通过指定起点和终点坐标，可以绘制出一条直线。在canvas中，可以使用lineTo()方法来绘制直线，并利用moveTo()方法来指定起点坐标。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 200);
    ctx.stroke();
</script>

圆形(Circle)

圆形是canvas中常用的图形类型之一，可以通过指定圆心坐标和半径来绘制圆形。在canvas中，可以使用arc()方法来绘制圆形，其中参数x和y为圆心坐标，参数r为半径。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.arc(100, 100, 50, 0, 2 * Math.PI);
    ctx.stroke();
</script>

矩形(Rectangle)

矩形是canvas中常用的图形类型之一，可以通过指定左上角坐标、宽度和高度来绘制矩形。在canvas中，可以使用rect()方法来绘制矩形。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.rect(50, 50, 100, 100);
    ctx.stroke();
</script>

椭圆(Ellipse)

椭圆是canvas中较少使用的图形类型之一，可以通过指定椭圆中心坐标、长轴和短轴长度来绘制椭圆。由于canvas本身不提供直接绘制椭圆的方法，可以借助贝塞尔曲线来绘制一个近似的椭圆。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var centerX = 100;
    var centerY = 100;
    var radiusX = 80;
    var radiusY = 40;
    var rotation = 0;
    var startAngle = 0;
    var endAngle = 2 * Math.PI;

    ctx.beginPath();
    ctx.ellipse(centerX, centerY, radiusX, radiusY, rotation, startAngle, endAngle);
    ctx.stroke();
</script>

文字(Text)

文字是canvas中常用的图形类型之一，可以通过指定文字内容、位置和样式来绘制文字。在canvas中，可以使用fillText()或strokeText()方法来绘制文字，其中fillText()用于填充文字，strokeText()用于绘制文字轮廓。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.font = "30px Arial";
    ctx.fillText("Hello, World!", 50, 50);
</script>

曲线(Bezier Curve)

曲线是canvas中常用的图形类型之一，可以通过指定控制点坐标来绘制曲线。在canvas中，可以使用bezierCurveTo()方法来绘制二次或三次贝塞尔曲线。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(75, 40);
    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
    ctx.fill();
</script>

图像(Image)

图像是canvas中常用的图形类型之一，可以通过指定图像源和位置来绘制图像。在canvas中，可以使用drawImage()方法来绘制图像。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.src = "image.jpg";
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
    };
</script>

路径(Path)

路径是canvas中最灵活的图形类型之一，可以通过一系列的路径操作命令来绘制复杂的图形。在canvas中，可以使用moveTo()、lineTo()、quadraticCurveTo()、bezierCurveTo()等方法来绘制路径。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
</script>

渐变(Gradient)

渐变是canvas中常用的图形样式之一，可以通过指定起始点、终点和颜色配置来创建渐变效果。在canvas中，可以使用createLinearGradient()或createRadialGradient()方法来创建线性渐变或放射性渐变。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var gradient = ctx.createLinearGradient(0, 0, 200, 0);
    gradient.addColorStop(0, "red");
    gradient.addColorStop(1, "white");
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 200, 200);
</script>

阴影(Shadow)

阴影是canvas中常用的效果之一，可以通过指定阴影属性来为图形添加阴影效果。在canvas中，可以使用shadowColor、shadowBlur和shadowOffsetX等属性来设置阴影效果。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.shadowColor = "black";
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.fillRect(50, 50, 100, 100);
</script>