convas 画布

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

大坤...

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

阅读量200

点赞数

文章标签： html

本文链接：https://blog.csdn.net/red_HTML/article/details/125821643

版权

简单的一个三角形

注意;坐标问题分清楚 x轴 y轴

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="" height="">
			版本太低
		</canvas>
		<script type="text/javascript">
			// 创建一个画布
			var canvas = document.getElementById("canvas");
			// 创建一个上下文对象
			var context = canvas.getContext("2d");
			// 告诉程序绘画路径开始
			context.beginPath();
			// 起点
			context.moveTo(0,0);
			//连接点
			context.lineTo(0,100);
			context.lineTo(150,100);
			context.closePath();
			//填充的颜色
			context.fillStyle="red";
			// 填充
			context.fill();
			//图形样式
			// context.strokeStyle="red";
			// 描边
			context.stroke();
			
		</script>
	</body>
</html>

笑脸：

建议先画眉毛

注意：画完一个图形后面不要加结束标签，会出现下面在画图形不显示等问题

每个分段，总的就是一个开始标签，后跟着一个描边中间添加自己想要的图形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="2000" height="2000"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("canvas")
			var context = canvas.getContext("2d")
			// 开始
			context.beginPath();   // 起点
			context.moveTo(100,100)// 连接点
			context.lineTo(300,200)// 结束
			context.stroke()//描边
			context.beginPath()//开始
			context.moveTo(400,200)
			context.lineTo(600,100)
			context.stroke()
			// 头部
			context.beginPath();//开头
			context.arc(350,400,230,0,Math.PI*2)
			context.fillStyle="yellow"
			context.fill()
			context.stroke()
			
			//眼睛
			context.beginPath();//开头
			context.arc(200,230,60,0,Math.PI*2)
			context.fillStyle="black"
			context.fill()
			context.stroke()
			//眼睛
			context.beginPath();//开头
			context.arc(500,230,60,0,Math.PI*2)
			context.fillStyle="black"
			context.fill()
			context.stroke()
			//鼻子
			context.beginPath();//开头
			context.arc(350,400,60,0,Math.PI*2)
			// 0 起始位置
			// 后面结束位置
			context.fillStyle="green"
			context.fill()
			context.stroke()
			context.beginPath()//开头
			context.arc(350,500,100,0,Math.PI*1)
			
			context.stroke()
			
		</script>
	</body>
</html>

一个杯子的案例

重点是上面的热气

代码分析：context.arc(300,200,50,1.5,Math.PI*1.5,true)

300，200 代表的就是x y 的坐标

50代表的是半径r

1.5代表的是他的开始位置（0 代表一个圆的最右边，0.5代表一个圆的最下面，1.5代表一个圆的最左边，2代表一个圆的最上面）

Math.PI*1.5代表结束位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="2000" height="2000"></canvas>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		// 被子上面的热气
		context.arc(100,100,50,1.5,Math.PI*1.5)
		context.stroke()
		context.beginPath()
		context.arc(100,200,50,1.5,Math.PI*1.5,true)
		context.stroke()
		context.beginPath()
		context.arc(200,100,50,1.5,Math.PI*1.5)
		context.stroke()
		context.beginPath()
		context.arc(200,200,50,1.5,Math.PI*1.5,true)
		context.stroke()
		context.beginPath()
		context.arc(300,100,50,1.5,Math.PI*1.5)
		context.stroke()
		context.beginPath()
		context.arc(300,200,50,1.5,Math.PI*1.5,true)
		context.stroke()
		// 杯子的中间部分
		context.beginPath();
		context.moveTo(0,600);
		context.lineTo(0,300);
		context.lineTo(400,300);
		context.lineTo(400,600);
		context.lineTo(0,600);
		context.lineWidth=5;
		context.stroke();
		// 被子的把手
		context.beginPath();
		context.arc(400,450,60,1.6,Math.PI*1.5,true);
		context.lineWidth=5;
		context.stroke();
	</script>
</html>