使用Canvas绘图-优快云博客

本文链接：https://blog.youkuaiyun.com/yin_991/article/details/78389102

本文介绍如何使用HTML5的Canvas元素进行绘图，包括线条、矩形、圆形等基本图形的绘制方法，并展示了不同类型的填充与描边效果。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas元素</title>
	<style>
		canvas{
			background: #605040;
		}
	</style>
</head>
<body>
	<canvas width="500" height="600" id="canvas">
		您的浏览器暂不支持
	</canvas>
	<script>
		var canvas=document.getElementById("canvas");
		var c=canvas.getContext("2d");
		c.linWidth=2;
		c.strokeStyle="#304060";


		c.moveTo(0,0);
		c.lineTo(200,200);
		c.lineTo(300,100);
		c.lineTo(0,0);
		c.stroke();//绘制空心形状
		//绘制矩形
		c.beginPath();
		c.rect(150,50,10,30);
		c.stroke();
		//绘制无填充矩形
		c.beginPath();
		c.strokeRect(180,50,200,200);
		//绘制填充矩形
		c.beginPath();
		c.linWidth=3;
		c.fillStyle="#008080";
		c.rect(10,100,100,100);
		c.fill();//绘制填充形状


		c.beginPath();
		c.fillStyle='yellow';
		c.fillRect(40,100,100,100);


		//绘制空心圆
		c.beginPath();
		c.arc(40,250,30,0,Math.PI*2,true);
		c.stroke();
		//绘制实心圆
		c.beginPath();
		c.arc(40,290,30,0,Math.PI*2,false);
		c.fill();


		//绘制圆弧（空心）及为其填充
		c.lineWidth=3;
		c.beginPath();
		c.arc(40,360,30,0,Math.PI/3,true);
		c.fill();
		c.stroke();


		//有关闭路径的圆弧
		c.lineWidth=3;
		c.fillStyle="yellow";
		c.strokeStyle="#807030";
		c.beginPath();
		c.arc(40,430,30,0,Math.PI/3,true);
		c.closePath();
		c.fill();
		c.stroke();
		
	</script>
</body>
</html>