使用HTML绘制图形

最新推荐文章于 2024-05-14 22:49:55 发布

冷血～多好

最新推荐文章于 2024-05-14 22:49:55 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/qq_44716544/article/details/102178411

版权

利用<canvas width="200" height="200"></canvas>创建画布;

利用var cav=document.getElemeById('mr-cav').getContext('2d'）获得Canvas元素，然后使用Canvas元素的getContext()方法来获得图形上下文。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绘制人物</title>
</head>
<body>
	<canvas id="mr-cav" width="900" height="900"></canvas>
	<script type="text/javascript">
		var cav=document.getElementById("mr-cav").getContext("2d");
		
		cav.beginPath();
		cav.fillStyle="red";
		cav.arc(450,270,100,0,Math.PI*2,true);
		cav.fill();


		cav.beginPath();
		cav.fillStyle="blue"
		cav.arc(425,250,5,0,Math.PI*2,true);
		cav.fill();
		
		cav.beginPath();
		cav.fillStyle="orange"
		cav.arc(300,280,50,0,Math.PI*2,true);
		cav.fill();

		cav.beginPath();
		cav.fillStyle="blue";
		cav.arc(475,250,5,0,Math.PI*2,true);
		cav.fill();
		
		
		
		cav.beginPath();
		cav.fillStyle="yellow";
		cav.moveTo(450,50);
		cav.lineTo(350,200);
		cav.lineTo(550,200);
		cav.fill();

		cav.beginPath();
		cav.fillStyle="blue";
		cav.rect(450,25,25,65);
		cav.fill();

		cav.beginPath();
		cav.fillStyle="white";
		cav.rect(350,125,50,50);
		cav.fill();

		cav.beginPath();
		cav.fillStyle="orange";
		cav.rect(500,150,75,150);
		cav.fill();
		
			
		cav.beginPath();
		cav.fillStyle="while";
		cav.moveTo(450,280);
		cav.lineTo(429,260);
		cav.lineTo(471,260);
		cav.fill();
		
		
		cav.beginPath();
		cav.fillStyle="yellow";
		cav.moveTo(425,750);
		cav.lineTo(200,300);
		cav.lineTo(700,300);
		cav.fill();
		
		


	</script>
</body>
</html>

代码效果如下：

冷血～多好

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用HTML绘制图形

利用<canvas width="200" height="200"></canvas>创建画布;利用var cav=document.getElemeById('mr-cav').getContext('2d'）获得Canvas元素，然后使用Canvas元素的getContext()方法来获得图形上下文。<!DOCTYPE html><htm...
复制链接

扫一扫