用canvas写一个七桥板的demo

最新推荐文章于 2024-07-25 09:24:40 发布

ACBYCL

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量113

点赞数

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/ACBYCL/article/details/126469547

版权

js 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

一.用canvas写一个七桥板的demo

二.最终效果

在这里插入图片描述

三.代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="800" height="600" style="border: 1px solid"></canvas>
		<script>
			var canvas = document.getElementById("canvas")
			var cxt = canvas.getContext("2d")
			colorlist = ["rgb(255,128,128)","rgb(255,0,0)","rgb(255,255,128)","rgb(255,128,0)","rgb(128,255,128)","rgb(128,255,0)","rgb(0,255,128)","rgb(0,255,64)","rgb(128,255,255","rgb(0,255,255)","rgb(255,128,255","rgb(255,0,255)"]
			window.onload = setInterval(function(){
				
				//三角形aej
				cxt.moveTo(100,100)
				cxt.lineTo(500,100)
				cxt.lineTo(300,300)
				cxt.lineTo(100,100)				
				cxt.fillStyle = colorlist[Math.floor(Math.random()*12)]
				cxt.fill()
				cxt.stroke()
				
				
				//三角形abe
				cxt.beginPath()
				cxt.moveTo(100,100)
				cxt.lineTo(100,500)
				cxt.lineTo(300,300)
				cxt.lineTo(100,100)
				cxt.fillStyle = colorlist[Math.floor(Math.random()*12)]
				cxt.fill()
				cxt.stroke()
				
				//三角形bcd
				cxt.beginPath()
				cxt.moveTo(100,500)
				cxt.lineTo(300,500)
				cxt.lineTo(200,400)
				cxt.lineTo(100,500)
				cxt.fillStyle = colorlist[Math.floor(Math.random()*12)]
				cxt.fill()
				cxt.stroke()
				
				//正方形cdfe
				cxt.beginPath()
				cxt.moveTo(300,300)
				cxt.lineTo(200,400)
				cxt.lineTo(300,500)
				cxt.lineTo(400,400)
				cxt.lineTo(300,300)
				cxt.fillStyle = colorlist[Math.floor(Math.random()*12)]
				cxt.fill()
				cxt.stroke()
				
				//三角形efg
				cxt.beginPath()
				cxt.moveTo(300,300)
				cxt.lineTo(400,200)
				cxt.lineTo(400,400)
				cxt.lineTo(300,300)
				cxt.fillStyle = colorlist[Math.floor(Math.random()*12)]
				cxt.fill()
				cxt.stroke()
				
				//平行四边形gfij
				cxt.beginPath()
				cxt.moveTo(500,100)
				cxt.lineTo(500,300)
				cxt.lineTo(400,400)
				cxt.lineTo(400,200)
				cxt.lineTo(500,100)
				cxt.fillStyle = colorlist[Math.floor(Math.random()*12)]
				cxt.fill()
				cxt.stroke()
				
				//三角形dhi
				cxt.beginPath()
				cxt.moveTo(500,300)
				cxt.lineTo(500,500)
				cxt.lineTo(300,500)
				cxt.lineTo(500,300)
				cxt.fillStyle = colorlist[Math.floor(Math.random()*12)]
				cxt.fill()
				cxt.stroke()
			}, 1000);
		</script>
	</body>
</html>