HTML5画布(canvas)绘制图形

最新推荐文章于 2025-03-28 00:27:46 发布

小媛同学.，

最新推荐文章于 2025-03-28 00:27:46 发布

阅读量4.7k

点赞数 2

文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/m0_61843988/article/details/125798329

版权

本文详细介绍了HTML5 canvas元素的使用，包括如何绘制线条、矩形、三角形、圆形、椭圆以及利用坐标画虚线，提供了一系列的示例代码，帮助开发者掌握canvas图形绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<canvas>标签

canvas 元素用于在网页上绘制图形

canvas 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。

默认情况下它在网页上是一块空白区域，默认大小300*150

注意：canvas画布默认背景色为透明色，可以自行定义背景色

使用html5的<canvas>标签在网页中创建一个画布，语法格式如下：

<canvas id="canvas" width="500" height="500">
     您的浏览器版本太低，不支持画布，请更新浏览器
</canvas>

1.1 绘制线条

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

步骤：

获取一个画布(要创建一个画布对象)
创建一个画布上下文对象
绘制图形的起始点(坐标)
绘制图形的连接点
闭合路径
设置图形的样式
描边

例图：

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500">
        您的浏览器版本太低，不支持画布，请更新浏览器
    </canvas>
    <script type="text/javascript">
        // 1.获取一个画布(要创建一个画布对象)
        var canvas = document.getElementById("canvas");
        // 2.创建一个画布上下文对象
        var context = canvas.getContext("2d");
        // 3.告诉程序绘画路径开始
        context.beginPath();
        // 4.绘制图形的起始点(坐标)
        context.moveTo(0,0);
        // 5.绘制图形的连接点
        context.lineTo(100,100);
        context.closePath();// 闭合路径
        // 6.设置图形的样式
        context.strokeStyle="red";
        // 7.描边
        context.stroke();
        context.fillStyle="red";// 设置要给图形填充的颜色
        context.fill();// 填充
    </script>
</body>
</html>

1.2 canvas 绘制矩形

<canvas>共提供了三种矩形绘制方法

fillReac(x, y, width, height) // 绘制填充矩形
strokeRect(x, y, width, height) // 绘制矩形边框
clearRect(x, y, width, height) // 清除矩形区域

例图：

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500">
        您的浏览器版本太低，不支持画布，请更新浏览器
    </canvas>
    <script type="text/javascript">
        // 1.获取一个画布(要创建一个画布对象)
        var canvas = document.getElementById("canvas");
        // 2.创建一个画布上下文对象
        var context = canvas.getContext("2d");
        // 3.调用一个画矩形的函数fillRect(x,y,width,height)
        context.fillStyle="red";
        context.fillRect(0,0,200,100);
        context.strokeStyle="red";
        context.strokeRect(0,0,200,100);
        //  context.clearRect(10,10,20,20);// 给定的矩形内清除指定的像素
    </script>
</body>
</html>

1.3 canvas 绘制三角形

beginPath() // 新建路径
moveTo(x, y) // 移动笔触，以此为路径起点
lineTo(x, y) // 绘制直线路径
closePath() // 闭合路径
stroke() // 将绘制的路径画出来，不会自动闭合路径
fill() // 将绘制的路径画出来并实心填充路径内部，若路径未闭合将自动连接起点和终点

例图：

实例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500">
        您的浏览器版本太低，不支持画布，请更新浏览器
    </canvas>
    <script type="text/javascript">
        // 1.获取一个画布(要创建一个画布对象)
        var canvas = document.getElementById("canvas");
        // 2.创建一个画布上下文对象
        var context = canvas.getContext("2d");
        // 3.告诉程序绘画路径开始
        context.beginPath();
        // 4.绘制图形的起始点(坐标)
        context.moveTo(0,0);
        // 5.绘制图形的连接点
        context.lineTo(0,100);
        context.lineTo(100,100);
        context.closePath();// 闭合路径
        // 6.设置图形的样式
        context.strokeStyle="red";
        // 7.描边
        context.stroke();
        context.fillStyle="red";// 设置要给图形填充的颜色
        context.fill();// 填充
    </script>
</body>
</html>

1.4 canvas 绘制圆形

arc(x, y, radius, startAngle, endAngle, anticlockwise) // 绘制圆弧路径

(x, y)：圆心，radius：半径，startAngle：起始弧度，endAngle：结束弧度，
anticlockwise：布尔值，false为顺时针绘制，true为逆时针绘制，默认为false顺时针

注意：方法内用的是弧度而不是角度，换算方法为弧度 = 角度 / 180 * Math.PI

例图：

实例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="cavsElem" width="900" height="600">
        您的浏览器不支持，请升级浏览器
    </canvas>
    <script>
        var context = document.getElementById('cavsElem').getContext('2d'); //获得上下文
        var canvas = document.getElementById('cavsElem');
        context.beginPath();//开始路径
        context.arc(200, 200, 200, 0, 2 * Math.PI, true); //会致圆形，true为逆时针
        context.closePath(); //关闭路径
        context.fillStyle = 'antiquewhite';//设置填充颜色
        context.fill(); //填充
        //绘制弧形
        context.beginPath();//开始路径
        context.strokeStyle = "#fff"; //设置描边颜色
        // context.lineWidth=5; //设置线的粗细
        context.arc(120, 100, 25, Math.PI, 5 * Math.PI, false); //绘制弧形
        context.closePath(); //关闭路径
        context.fillStyle = 'black';//设置填充颜色
        context.fill(); //填充
        context.stroke(); //描边
        //绘制弧形
        context.beginPath();//开始路径
        context.strokeStyle = "#bbb"; //设置描边颜色
        // context.lineWidth=5; //设置线的粗细
        context.arc(270, 100, 25, Math.PI, 5 * Math.PI, false); //绘制弧形
        context.closePath(); //关闭路径
        context.fillStyle = 'black';//设置填充颜色
        context.fill(); //填充
        context.stroke(); //描边
        //绘制弧形
        context.beginPath();//开始路径
        context.strokeStyle = "#fff"; //设置描边颜色
        context.lineWidth = 5; //设置线的粗细
        context.arc(200, 260, 80, Math.PI / 6.5, 5 * Math.PI / 6, false); //绘制弧形
        context.stroke(); //描边
    </script>
</body>
</html>

1.5 canvas 绘制椭圆

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) // 绘制椭圆路径
参数的意思：(起点x.起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针)

例图：=

实例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制圆形</title>
</head>
<body>
    <canvas id="canvas" height="500" width="500px">
        您的浏览器版本太低，不支持画布，请更新浏览器
    </canvas>
    <script type="text/javascript">
        // 1.获取画布（创建一个画布对象）
        var canvas = document.getElementById("canvas");
        // 2.创建一个画布上下文
        var context = canvas.getContext("2d");
        // 绘制椭圆
        context.ellipse(100,100,100,30,0,0,Math.PI*2);
        context.stroke();
    </script>
</body>
</html>

1.6 利用坐标画虚线

lineWidth=2;//设置线的粗细

例图：

实例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用坐标画虚线</title>
</head>
<body>
    <canvas id="canvas">
        您的浏览器版本太低，不支持画布，请更新浏览器
    </canvas>
    <script type="text/javascript">
        // 1.获取画布（创建一个画布对象）
        var canvas = document.getElementById("canvas");
        // 2.创建一个画布上下文
        var context = canvas.getContext("2d");
        // 3.开始路径
        context.beginPath();
        // 4.设置起始点(坐标)
        // context.beginPath();
        // context.setLineDash([10,20,5]);// 设置的是虚线的呈现方式
        // context.moveTo(0,0);
        // context.lineTo(300,0);
        // context.lineWidth=5;
        // context.stroke();
        // 使用循环：做重复的事情
        for(var i=0;i<30;i++){
            context.beginPath();
            context.moveTo(10*i,0);
            context.lineTo(10*i+5,0);
            context.closePath();
            // 设置样式
            context.lineWidth=5;
            // 描边
            context.stroke();
        }
    </script>
</body>
</html>