学习canvas笔记，demo1，画个图标

最新推荐文章于 2024-04-20 16:29:18 发布

xh2010082423

最新推荐文章于 2024-04-20 16:29:18 发布

阅读量432

点赞数

分类专栏： js 文章标签： canvas

本文链接：https://blog.csdn.net/xh2010082423/article/details/51783842

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<img src="https://img-blog.csdn.net/20160629163650979?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />凭感觉画的，没什么美感，完全是代码堆积上去的，也没抽象成可用的方法。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo1</title>
</head>
<body>
	<canvas id='can' width="200px" height="250px"></canvas>
	<script>
		var $can = document.getElementById('can');

		function painLine(){
			var ctx = $can.getContext('2d');
			var r = 80;

			ctx.beginPath();
			ctx.fillStyle = '#1e78e7';
			ctx.arc(100,100,80,0,Math.PI*2,false);
			ctx.fill();
			ctx.closePath();

			var dig = Math.PI*2 / 12;

			var poinB = {
				x: Math.sin(dig*3/2-Math.PI/2)*80+100,
				y: Math.cos(dig*3/2-Math.PI/2)*80+100
			};
			var poinM = {
				x: Math.sin(dig*3-Math.PI/2)*80+100,
				y: Math.cos(dig*3-Math.PI/2)*80+100
			};
			var poinE = {
				x: Math.sin(dig*9/2-Math.PI/2)*80+100,
				y: Math.cos(dig*9/2-Math.PI/2)*80+100
			};
			ctx.beginPath();
			ctx.fillStyle = '#1e78e7';
			ctx.moveTo(poinB.x, poinB.y);
			ctx.lineTo(poinM.x, poinM.y+27);
			
			ctx.lineTo(poinE.x, poinE.y);
			
			ctx.lineTo(poinB.x, poinB.y);
			ctx.fill();
			ctx.closePath();

			var pointLT = {
				x: 100-r/2,
				y: 100-r/2
			}
			var radius = r/8;

			ctx.beginPath();
			ctx.moveTo(pointLT.x*1+radius, pointLT.y);
			ctx.arcTo(pointLT.x*1+r, pointLT.y,pointLT.x*1+r, pointLT.y*1+r,radius);
			ctx.arcTo(pointLT.x*1+r, pointLT.y*1+r, pointLT.x, pointLT.y*1+r,radius);
			ctx.arcTo(pointLT.x, pointLT.y*1+r, pointLT.x, pointLT.y,radius);
			ctx.arcTo(pointLT.x,pointLT.y,pointLT.x*1+radius,pointLT.y,radius);
			ctx.fillStyle = '#fff';
			ctx.fill();
			ctx.closePath();

			ctx.beginPath();
			ctx.moveTo(pointLT.x*1+r, pointLT.y*1+r-radius);
			ctx.lineTo(pointLT.x*1+r+3, pointLT.y*1+r+2);
			ctx.lineTo(pointLT.x*1+r-radius, pointLT.y*1+r);
			ctx.lineTo(pointLT.x*1+r, pointLT.y*1+r-radius);
			ctx.fillStyle = '#fff';
			ctx.fill();
			ctx.closePath();

			var pointLTLeft = {
				x: 100-r/5,
				y: 100-r/10
			}
			ctx.beginPath();
			ctx.moveTo(pointLTLeft.x*1+4, pointLTLeft.y);
			ctx.arcTo(pointLTLeft.x*1+8, pointLTLeft.y,pointLTLeft.x*1+8, pointLTLeft.y*1+8,4);
			ctx.arcTo(pointLTLeft.x*1+8, pointLTLeft.y*1+18, pointLTLeft.x, pointLTLeft.y*1+18,4);
			ctx.arcTo(pointLTLeft.x, pointLTLeft.y*1+18, pointLTLeft.x, pointLTLeft.y,4);
			ctx.arcTo(pointLTLeft.x,pointLTLeft.y,pointLTLeft.x*1+4,pointLTLeft.y,4);
			ctx.fillStyle = '#1e78e7';
			ctx.fill();
			ctx.closePath();

			var pointLTRight = {
				x: 100+r/10,
				y: 100-r/10
			}
			ctx.beginPath();
			ctx.moveTo(pointLTRight.x*1+4, pointLTRight.y);
			ctx.arcTo(pointLTRight.x*1+8, pointLTRight.y,pointLTRight.x*1+8, pointLTRight.y*1+8,4);
			ctx.arcTo(pointLTRight.x*1+8, pointLTRight.y*1+18, pointLTRight.x, pointLTRight.y*1+18,4);
			ctx.arcTo(pointLTRight.x, pointLTRight.y*1+18, pointLTRight.x, pointLTRight.y,4);
			ctx.arcTo(pointLTRight.x,pointLTRight.y,pointLTRight.x*1+4,pointLTRight.y,4);
			ctx.fillStyle = '#1e78e7';
			ctx.fill();
			ctx.closePath();
			
		}
		painLine();
	</script>
</body>
</html>