HTML5(canvas)画布绘制图形

最新推荐文章于 2025-06-23 22:40:28 发布

博博915

最新推荐文章于 2025-06-23 22:40:28 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： html5 前端

本文链接：https://blog.youkuaiyun.com/weixin_56393766/article/details/125806820

笔记专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了HTML5的canvas标签及其基本使用，包括如何创建画布、设置宽高、绘制路径、描边和填充图形。通过示例展示了如何绘制直线、三角形，并利用JavaScript实现动态画图。此外，还提供了一个简单的笑脸绘制示例，帮助读者理解canvas的绘图原理。

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

canvas标签：

<canvas id="cavsElem" width="900" height="600">
        您的浏览器不支持，请升级浏览器
</canvas>

1.定义id属性是为了在JavaScript代码中引用元素
2.标签中间的文字在浏览器不支持canvas的情况下才会显示
3.canvas标签与img标签一样，有两个原生属性width和height默认300*500像素
4.不要用css控制它的宽和高，否则可能会引起画布上的图形变形

要在画布中绘图要通过函数

获取网页中的画布对象

//1.获取一个画布(要创建画布对象)

var avanvs = document.getElementById("avanvs");

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

接下来就该准备画笔了

有了画布就该准备画笔了

	//2.创建一个画布上下文对象
	var contxet=avanvs.getContext("2d");
    2d代表的是画笔的种类,也可以用3d进行三维操作

告诉canvas绘画路径开始

    //3.告诉canvas开始绘画
    contxet.beginPath();

坐标起点也就是开始的地点(坐标)

      //4.绘制图形的起始点(坐标)
      contxet.moveTo(0,0);

绘制线条：

在canvas中使用lineTo()方法绘制直线：
context.lineTo(x,y);
"x,y"为线头点坐标，lineTo( )方法用于定义从x,y的位置绘制一条直线
到起点或者上一个线头点

	//5.绘制图形的连接点
	contxet.lineTo(0,100);

有开始就有结束接下来是开始路径和闭合路径

    contxet.closePath();//闭合点

还是路径已经在告诉canvas绘画路径开始中写过

开始路径已经写过在这里需要闭合路径

如果你嫌看不见自己画的样式可以添加边框

	//6.设置图新的形式
	contxet.strokeStyle="red"

接下来就要开始描边了

    //7.描边
	contxet.stroke();

用Canvas绘制一个图形的基本步骤：

	//1.获取一个画布(要创建画布对象)
	var avanvs = document.getElementById("avanvs");
	//2.创建一个画布上下文对象
	var contxet=avanvs.getContext("2d");
	//3.告诉程序绘画路径开始
	contxet.beginPath();
	//4.绘制图形的起始点(坐标)
	contxet.moveTo(0,0);
	//5.绘制图形的连接点
	contxet.lineTo(0,100);
	contxet.closePath();//闭合点
	//6.设置图新的形式
	contxet.strokeStyle="red"
	//7.描边
	contxet.stroke();

接下来请欣赏创建三角形的步骤：

<!DOCTYPE html>
<html lang="zh">
<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画布 -->
	<canvas id="avanvs" width="500" height="500">
        您的浏览器版本太低不支持画布请更新浏览器
    </canvas>
	<script type="text/javascript">
		//1.获取一个画布(要创建画布对象)
		var avanvs = document.getElementById("avanvs");
		//2.创建一个画布上下文对象
		var contxet=avanvs.getContext("2d");
		//3.告诉程序绘画路径开始
		contxet.beginPath();
		//4.绘制图形的起始点(坐标)
		contxet.moveTo(0,0);
		//5.绘制图形的连接点
		contxet.lineTo(0,100);
		contxet.lineTo(100,100);
		contxet.closePath();//闭合点
		//6.设置图新的形式
		contxet.strokeStyle="red"//描边颜色
		//7.描边
		contxet.stroke();
		contxet.fillStyle="pink";//填充三角形的颜色
		contxet.fill();//填充
	</script>
</body>
</html>

这种方式也比较麻烦也可以用js的循环来缩减代码：

     <canvas id="canvas">
           您的浏览器版本太低，不支持画布，请更新浏览器
     </canvas>
    <script type="text/javascript">
        // 1.获取画布（创建一个画布对象）
        var canvas = document.getElementById("canvas");
        // 2.创建一个画布上下文
        var context = canvas.getContext("2d");
        // 3.开始路径
        context.beginPath();
        for (var i = 0; i < 100; i++) {
            context.beginPath();
            context.moveTo(10 * i, 0);
            context.lineTo(10 * i + 5, 0);
            context.closePath();
            // 设置样式
            context.lineWidth = 5;
            // 描边
            context.stroke();
        }
    </script>

可以画一个笑脸：

我画的不好看还在学习阶段 ing...

<!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 = 'pink';//设置填充颜色
        context.fill(); //填充
        //绘制弧形
        context.beginPath();//开始路径
        context.strokeStyle = "#fff"; //设置描边颜色
        // context.lineWidth=5; //设置线的粗细
        context.arc(100, 100, 25, Math.PI, 5 * Math.PI, false); //绘制弧形
        context.closePath(); //关闭路径
        context.fillStyle = 'blue';//设置填充颜色
        context.fill(); //填充
        context.stroke(); //描边
        //绘制弧形
        context.beginPath();//开始路径
        context.strokeStyle = "#bbb"; //设置描边颜色
        // context.lineWidth=5; //设置线的粗细
        context.arc(280, 100, 25, Math.PI, 5 * Math.PI, false); //绘制弧形
        context.closePath(); //关闭路径
        context.fillStyle = 'blue';//设置填充颜色
        context.fill(); //填充
        context.stroke(); //描边
        //绘制弧形
        context.beginPath();//开始路径
        context.strokeStyle = "#fff"; //设置描边颜色
        context.lineWidth = 5; //设置线的粗细
        context.arc(200, 260, 80, Math.PI / 5.5, 5 * Math.PI / 6, false); //绘制弧形
        context.stroke(); //描边
    </script>
</body>
</html>

效果图