<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
width: 100%;
position: relative;
}
#box {
height: 100%;
width: 300px;
background-color: #177CB0;
position: absolute;
/* overflow: hidden; */
/* display: flex; */
}
#canvas {
display: block;
position: absolute;
right: 0px;
}
#top {
height: 200px;
width: 100%;
background-color: #177cb0;
color: white;
font-size: 30px;
/* font-family: '宋体'; */
border-bottom: 2px solid gray;
text-align: center;
/* margin-top: 150px; */
line-height: 200px;
overflow: hidden;
}
.text{
height: 50px;
width: 90%;
background-color: green;
border-radius: 15px;
color: white;
text-align: center;
line-height: 50px;
font-size: 25px;
margin: 10px auto;
box-shadow: 0px 0px 4px rgba(0,0,0,0.5);
user-select:none ;
}
.text:hover{
box-shadow: 0px 0px 7px rgba(0,0,0,0.8);
cursor: pointer;
}
ul{
list-style: none;
}
li{
height: 40px;
width: 60%;
margin: 10px auto;
position: relative;
}
.one{
width: 40px;
height: 100%;
background-color: green;
border-radius: 10px 0px 0px 10px ;
line-height: 40px;
text-align: center;
float: left;
margin-left: 10px;
font-size: 20px;
color: white;
}
input{
height:40px ;
width: 40px;
border-radius: 0px 10px 10px 0px;
border: none;
float: left;
/* background-color: #808080; */
font-size: 20px;
}
.show{
display: none;
}
</style>
</head>
<body>
<div id="box">
<div id="top">
折线图
</div>
<div class="text" id="init">
开始绘制
</div>
<div class="text" id="zuobiao">
生成坐标
</div>
<div class="text" id="input">
插入坐标
</div>
<ul class="show">
<li>
<div class="one">
X
</div><input type="text"/>
<div class="one">
Y
</div><input type="text"/>
</li>
<li>
<div class="one">
X
</div><input type="text"/>
<div class="one">
Y
</div><input type="text"/>
</li>
<li>
<div class="one">
X
</div><input type="text"/>
<div class="one">
Y
</div><input type="text"/>
</li>
</ul>
<div class="text" id="draw">
生成图像
</div>
</div>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas')
var c = canvas.getContext('2d')
var cw = canvas.width = window.innerWidth - 300
var ch = canvas.height = window.innerHeight
c.fillStyle = 'papayawhip'
c.fillRect(0, 0, cw, ch)
var begin = document.getElementById('init')
//第一个功能实现
var arrX = []
var arrY = []
var lineLength = 30
var init = function(){
//获取每个格子三十像素有几个
sumX =parseInt(cw/lineLength)+1
sumY = parseInt(ch/lineLength) +1
c.setLineDash([2,3])
// console.log(sumX,sumY)
//将每一个格子像素的位置存进数组里
for(var i=0;i<sumX;i++){
arrX.push(i*30)
}
for(var j=0;j<sumY;j++){
arrY.push(j*30)
}
//开始画线
for(var i= 0;i<arrX.length;i++){
c.beginPath()
c.moveTo(arrX[i],0)
c.lineTo(arrX[i],ch)
c.strokeStyle = 'lightpink'
c.stroke()
c.closePath()
}
for(var i= 0;i<arrY.length;i++){
c.beginPath()
c.moveTo(0,arrY[i])
c.lineTo(cw,arrY[i])
c.strokeStyle = 'lightpink'
c.stroke()
}
}
begin.addEventListener('click',function(){
init()
})
//第二个功能
var zuobiao = document.getElementById('zuobiao')
var x1 = lineLength*3
var y1 = lineLength*18
var drawTwo = function(){
c.setLineDash([2,0])
c.lineWidth = '3'
c.lineCap = 'round'
c.beginPath()
c.moveTo(x1,y1)
c.lineTo(x1+20*lineLength,y1)
c.lineTo(x1+20*lineLength-10,y1-10)
c.lineTo(x1+20*lineLength,y1)
c.lineTo(x1+20*lineLength-10,y1+10)
c.strokeStyle = 'red'
c.stroke()
c.closePath()
c.beginPath()
c.moveTo(x1,y1)
c.lineTo(x1,y1-16*lineLength)
c.lineTo(x1-10,y1-16*lineLength+10)
c.lineTo(x1,y1-16*lineLength)
c.lineTo(x1+10,y1-16*lineLength+10)
c.stroke()
c.closePath()
for(var i =0;i<20;i++){
c.fillStyle = 'red'
c.font = '25 微软雅黑'
c.fillText(i,x1+i*30-5,y1+17)
}
for(var i = 1;i<16;i++){
c.fillStyle = 'red'
c.font = '25 微软雅黑'
if(i<10){
c.fillText(i,x1-18,y1-i*30+4)
}else{
c.fillText(i,x1-20,y1-i*30+4)
}
}
}
zuobiao.addEventListener('click',function(){
drawTwo()
})
//第三个功能插入坐标
var inputs = document.getElementById('input')
// var ul = document.getElementsByTagName('ul')
var shows = document.getElementsByClassName('show')[0]
inputs.addEventListener('click',function(){
shows.style.display = 'block'
})
//第四个功能
var inarr = []
var drawImg = function(){
c.beginPath()
c.moveTo(inarr[0][0],inarr[0][1])
for(i = 1;i<inarr.length;i++){
c.lineTo(inarr[i][0],inarr[i][1])
}
c.strokeStyle = 'red'
c.stroke()
c.closePath()
}
var draw = document.getElementById('draw')
draw.addEventListener('click',function(){
var lis = document.getElementsByTagName('li')
for(var i=0;i<lis.length;i++){
var ins = lis[i].getElementsByTagName('input')
inx2 =x1+ins[0].value*30;
iny2 =y1-ins[1].value*30;
if(inx2 && iny2){
inarr.push([inx2,iny2])
}
}
if(inarr == []){
}else{
drawImg()
}
})
</script>
</body>
</html>
canvas效果二———折线图
最新推荐文章于 2023-08-14 17:17:23 发布