canvas效果一画线

最新推荐文章于 2022-09-11 15:31:27 发布

雕琢时光纸戆

最新推荐文章于 2022-09-11 15:31:27 发布

阅读量234

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/TISRNW/article/details/103180764

版权

html 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

在这里插入图片描述

css代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			html,body{
				height: 100%;
				position: relative;
			}
			#canvas{
				position: absolute;
			}
			.box{
				height: 100%;
				width: 200px;
				background-color: wheat;
				position: absolute;
				right: 0px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}
			p{
				height: 40px;
				width: 100%;
				background-color: #425066;
				text-align: center;
				line-height: 40px;
				font-size: 25px;
				color: white;
				border-radius: 30px 30px 0px 0px;
			}
			input{
				height: 40px;
				width: 98%;
				font-size: 30px;
				border: none;
			}
			#btn{
				color: white;
				background-color: green;
				
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="" height=""></canvas> 
		<div class="box">
			<div >
				<p>击杀</p>
				<input type="text"  />
			</div>
			<div >
				<p>生存</p>
				<input type="text"  />
			</div>
			<div >
				<p>助攻</p>
				<input type="text"  />
			</div>
			<div>
				<p>金钱</p>
				<input type="text"  />
			</div>
			<div >
				<p>防御</p>
				<input type="text"  />
			</div>
			<div>
				<p>魔法</p>
				<input type="text"  />
			</div>
			<div>
				<p></p>
				<input type="button"  value="图像生成" id="btn" />
				
			</div>
			
		</div>
	<script src="js/1.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

js代码

var canvas = document.getElementById('canvas')
var c = canvas.getContext('2d')
var cw = canvas.width = window.innerWidth - 200
var ch = canvas.height = window.innerHeight
c.fillStyle = 'wheat'
c.fillRect(0, 0, cw, ch)

//画线
//c.beginPath()
//c.moveTo()
//c.lineTo()
//c.closePath()
var draw = function() {
	var x = cw / 2
	var y = ch / 2
	//第一个三个小三角
	c.beginPath()
	c.moveTo(x, y +4)
	c.lineTo(x +2- 150, y + 2 + 150 * Math.sqrt(3))
	c.lineTo(x -2+ 150, y + 2 + 150 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#70f3ff'
	c.fill()
	c.fillStyle = 'black'
	c.font = '30px 微软雅黑'
	c.fillText('击杀',x+180,y+10+150*Math.sqrt(3))
    c.fillStyle = 'black'
    c.font = '30px 微软雅黑'
    c.fillText('金钱',x-230,y+10+150*Math.sqrt(3))
	c.beginPath()
	c.moveTo(x, y +4)
	c.lineTo(x+2 - 100, y + 2 + 100 * Math.sqrt(3))
	c.lineTo(x -2+ 100, y + 2 + 100 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#44cef6'
	c.fill()
	c.beginPath()
	c.moveTo(x, y +4)
	c.lineTo(x +2- 50, y + 2 + 50 * Math.sqrt(3))
	c.lineTo(x -2+ 50, y + 2 + 50 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#065279'
	c.fill()
	//第二个三个小三角
	c.beginPath()
	c.moveTo(x, y-2 )
	c.lineTo(x-2 + 150, y  - 150 * Math.sqrt(3))
	c.lineTo(x +2- 150, y  - 150 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#70f3ff'
	c.fill()
	c.fillStyle = 'black'
	c.font = '30px 微软雅黑'
	c.fillText('生存',x+180,y-10-150*Math.sqrt(3))
	c.beginPath()
	c.moveTo(x, y-2 )
	c.lineTo(x -2+ 100, y  - 100 * Math.sqrt(3))
	c.lineTo(x +2- 100, y  - 100 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#44cef6'
	c.fill()
	c.beginPath()
	c.moveTo(x, y-2 )
	c.lineTo(x-2 + 50, y  -50 * Math.sqrt(3))
	c.lineTo(x +2- 50, y - 50 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#065279'
	c.fill()
	
	//第三个三个小三角
	c.beginPath()
	c.moveTo(x, y )
	c.lineTo(x + 300, y  )
	c.lineTo(x + 150, y  - 150 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#70f3ff'
	c.fill()
	c.fillStyle = 'black'
	c.font = '30px 微软雅黑'
	c.fillText('助攻',x+330,y)
	c.beginPath()
	c.moveTo(x, y )
	c.lineTo(x + 200, y  )
	c.lineTo(x + 100, y  - 100 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#44cef6'
	c.fill()
	c.beginPath()
	c.moveTo(x, y )
	c.lineTo(x + 100, y  )
	c.lineTo(x + 50, y  - 50 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#065279'
	c.fill()
	//第四个三个小三角
	c.beginPath()
	c.moveTo(x, y + 2)
	c.lineTo(x + 300, y + 2 )
	c.lineTo(x + 150, y + 2 + 150 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#70f3ff'
	c.fill()
	c.beginPath()
	c.moveTo(x, y + 2)
	c.lineTo(x + 200, y + 2 )
	c.lineTo(x + 100, y + 2 + 100 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#44cef6'
	c.fill()
	c.beginPath()
	c.moveTo(x, y + 2)
	c.lineTo(x + 100, y + 2 )
	c.lineTo(x + 50, y + 2 + 50 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#065279'
	c.fill()
	//第五个三个小三角
	c.beginPath()
	c.moveTo(x, y )
	c.lineTo(x - 300, y  )
	c.lineTo(x - 150, y  - 150 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#70f3ff'
	c.fill()
	c.fillStyle = 'black'
	c.font = '30px 微软雅黑'
	c.fillText('击杀',x-230,y-10-150*Math.sqrt(3))
	c.beginPath()
	c.moveTo(x, y )
	c.lineTo(x - 200, y  )
	c.lineTo(x - 100, y  - 100 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#44cef6'
	c.fill()
	c.beginPath()
	c.moveTo(x, y )
	c.lineTo(x - 100, y  )
	c.lineTo(x - 50, y  - 50 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#065279'
	c.fill()
	//最后一个
	c.beginPath()
	c.moveTo(x, y + 2)
	c.lineTo(x - 300, y + 2 )
	c.lineTo(x - 150, y + 2 + 150 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#70f3ff'
	
	c.fill()
	c.fillStyle = 'black'
	c.font = '30px 微软雅黑'
	c.fillText('击杀',x-380,y)
	c.beginPath()
	c.moveTo(x, y + 2)
	c.lineTo(x - 200, y + 2 )
	c.lineTo(x - 100, y + 2 + 100 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#44cef6'
	c.fill()
	c.beginPath()
	c.moveTo(x, y + 2)
	c.lineTo(x - 100, y + 2 )
	c.lineTo(x - 50, y + 2 + 50 * Math.sqrt(3))
	c.closePath()
	c.fillStyle = '#065279'
	c.fill()
	
}

var show  = document.getElementById('btn')
var isShow = false
show.addEventListener('click',function(){
	
		draw()
	
		
})

雕琢时光纸戆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas效果一画线

css代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } ...
复制链接

扫一扫