今日学习画布

遠2002

已于 2022-07-15 16:55:19 修改

阅读量220

点赞数

文章标签：前端

于 2022-07-15 16:54:04 首次发布

本文链接：https://blog.csdn.net/asdfg_asdsa/article/details/125806950

版权

这篇博客介绍了如何使用HTML5的Canvas元素进行图形绘制，包括设置画布、创建画布上下文对象、绘制线条以及闭合图形如三角形，并提供了详细的JavaScript代码示例。通过示例展示了如何设置线宽、颜色以及填充样式。

摘要由CSDN通过智能技术生成

canvas是一个画布标签，，默认情况下它在网页上是一块空白的区域，大小300*150，

canvas元素本身没有绘图能力，与脚本（通常为JavaScript）进行结合使用，绘制工具在JavaScript内进行

方式：

创建画布

<canvas id="画布名" width="画布的宽" height="画布的高"></canvas>

获取画布（要创建一个画布对象）

var canvas=document.getElementById("画布名");

创建一个画布上下文对象

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

告诉程序绘画路径开始

context.beginPath();

绘画图形的起始点（坐标）

context.moveTo(x,y);

绘制图形的连接点

context.lineTo(x,y);

设置图形的样式

context.lineWidth=""; //设置线的粗细
context.strokeStyle=""; //设置线的颜色

描边

context.stroke();

例：线

<canvas id="canvas" width="600" height="600"></canvas>
		<script type="text/javascript">
			//1.获取一个画布（要创建一个画布对象）
			var canvas=document.getElementById("canvas");
			//2.创建一个画布上下文对象
			var context=canvas.getContext("2d");
			//3.告诉程序绘画路径开始
			context.beginPath();
			//4.绘制图形的起始点（坐标）
			context.moveTo(20,20);
			//5.绘制图形的连接点
			context.lineTo(300,300);
			//6.设置图形的样式
			context.lineWidth="10"; //设置线的粗细
			context.strokeStyle="black"; //设置线的颜色
			//7.描边
			context.stroke();
		</script>

闭合图形三角

<canvas id="canvas" width="600" height="600"></canvas>
<script type="text/javascript">
			//1.获取一个画布（要创建一个画布对象）
			var canvas=document.getElementById("canvas");
			//2.创建一个画布上下文对象
			var context=canvas.getContext("2d");
			//3.告诉程序绘画路径开始
			context.beginPath();
			//4.绘制图形的起始点（坐标）
			context.moveTo(20,20);
			//5.绘制图形的连接点
			context.lineTo(300,300);
			context.lineTo(20,300);
			//context.lineTo(0,0);
			context.closePath();//闭合路线
			//6.设置图形的样式
			context.lineWidth="10"; //设置线的粗细
			context.strokeStyle="black"; //设置线的颜色
			//7.描边
			context.stroke();
			
			context.fillStyle="green"; //设置要给图形填充的颜色 
			context.fill();  //填充
		</script>