canvas绘制笑脸

最新推荐文章于 2023-09-23 09:36:09 发布

PPone117

最新推荐文章于 2023-09-23 09:36:09 发布

阅读量794

点赞数 1

分类专栏：学习笔记文章标签： html5

本文链接：https://blog.csdn.net/PPone117/article/details/106001498

版权

学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML5用canvas绘制一个笑脸

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id='my' width = "600" height = "600">
			
		</canvas>
		<script>
			var canvas = document.getElementById('my');
			canvas.style.border = '2px solid black';
			var ggk = canvas.getContext('2d');
			ggk.beginPath();
			ggk.lineWidth = 8;
			ggk.strokeStyle = 'darkgrey';
			ggk.arc(300,300,280,0,2*Math.PI,true);
			ggk.stroke();
			
			ggk.beginPath();
			ggk.linewidth = 2;
			ggk.strokeStyle = 'darkgrey';
			ggk.fillStyle = 'darkgrey';
			ggk.arc(150,200,30,0,2*Math.PI,true);
			ggk.stroke();
			ggk.fill();
			
			ggk.beginPath();
			ggk.linewidth = 2;
			ggk.strokeStyle = 'darkgrey';
			ggk.fillStyle = 'darkgrey';
			ggk.arc(450,200,30,0,2*Math.PI,true);
			ggk.stroke();
			ggk.fill();
			
			ggk.beginPath();
			ggk.linewidth = 2;
			ggk.strokeStyle = 'black';
			ggk.fillStyle = 'black';
			ggk.arc(150,200,12,0,2*Math.PI,true);
			ggk.stroke();
			ggk.fill();
			
			ggk.beginPath();
			ggk.linewidth = 2;
			ggk.strokeStyle = 'black';
			ggk.fillStyle = 'black';
			ggk.arc(450,200,12,0,2*Math.PI,true);
			ggk.stroke();
			ggk.fill();
			
			ggk.beginPath();
			ggk.linewidth = 2;
			ggk.strokeStyle = 'darkgrey';
			ggk.fillStyle = 'darkgrey';
			ggk.arc(300,300,30,0,2*Math.PI,true);
			ggk.stroke();
			ggk.fill();
			
			ggk.beginPath();
			ggk.strokeStyle = 'black';
			ggk.lineWidth = 10;
			ggk.moveTo(100,350);
			ggk.quadraticCurveTo(200,500,450,380);
			ggk.closePath();
			ggk.stroke();
		</script>
	</body>
</html>