canvas = $('#myCanvas')[0]
ctx = canvas.getContext('2d')
// 画出左边到右边的连接
linkWith: function(ctxx, leftIndex, rightIndex) {
console.log("link "+leftIndex+" with "+rightIndex)
ctxx.beginPath()
ctxx.moveTo(0.5,(2*leftIndex-1)*cellHeight + 0.5)
ctxx.lineWidth=1
ctxx.lineTo(canvasWidth +0.5,(2*rightIndex-1)*cellHeight + 0.5)
ctxx.stroke()
ctxx.closePath()
},
<!doctype html><html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<style type="text/css">
html{
height: 100%
}
html,body,ul,li,canvas{
margin: 0
padding: 0
}
</style>
</head>
<body bgcolor="#000000">
<canvas id="knife"></canvas>
</body>
<script>
var canvas = document.getElementById("knife")
canvas.style.position = "absolute"
canvas.style.top = 0
var w = window.innerWidth
var h = window.innerHeight
canvas.width = w
canvas.height = h
var cxt = canvas.getContext("2d")
cxt.strokeStyle = "#FFF"
var list = []
var G = 0.4 //向心加速度
var SPEED_Y = -1 //向上速度
var centerLine = w/2 //龙卷风中线
function addLine(){
var LEN = 2
for(var i = 0 i <LEN i ++){
list.push({
x:w/2,
y:h/1.3,
g:G,
c:centerLine+2*Math.random(),
sx:(Math.random()-0.5)*4,
sy:SPEED_Y+0.5*(Math.random()-0.5),
len:Math.round(Math.random()*10+5),
list:[{x:w/2,y:h/1.3}]
})
}
}
function step(){
cxt.clearRect(0,0,w,h)
addLine()
var obj
for(var i = 0 i <list.lengthi ++){
obj = list[i]
if(obj.y <h/2.5){//如果超过这个高度，就删除一个点
obj.len --
if(obj.len == 0){
list.splice(i,1)
i --
continue
}
}
obj.x += obj.sx
obj.y += obj.sy
obj.sx += obj.g
obj.g = obj.x >obj.c ? -G : G
obj.list.unshift({x:obj.x,y:obj.y})//记录下质点运动轨迹
obj.list = obj.list.slice(0,obj.len)//仅仅画出其中一段线就好
//画出所有点的连线
cxt.beginPath()
cxt.moveTo(obj.list[0].x,obj.list[0].y)
for(var j = 1 j <obj.list.lengthj ++){
cxt.lineTo(obj.list[j].x,obj.list[j].y)
}
cxt.stroke()
}
requestAnimationFrame(step)
}
requestAnimationFrame(step)
</script>
</html>
你看看基础功能是否已经实现，你只要点击 a跟3连线就行了，以後的具体逻辑和样式自己调整代码如下
<%@ page contentType="text/htmlcharset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function drawThis(obj){
if(obj.style.border=="1px solid red"){
obj.style.border="1px solid blue"
}else{
obj.style.border="1px solid red"
}
var div = document.getElementsByTagName("div")
var leftX = ""
var leftY = ""
var rightX=""
var rightY=""
for ( var i = 0i <div.lengthi++) {
if(div[i].style.border=="1px solid blue"){
if(div[i].className=="left"){
leftX = $(div[i]).position().left+70
leftY = $(div[i]).position().top+35
}else if(div[i].className=="right"){
rightX = $(div[i]).position().left
rightY = $(div[i]).position().top+35
}
}
}
if(rightX!=""&&leftX!=""){
for ( var i = 0i <(rightX-leftX)/2i++) {
var newDiv = document.createElement("div")
var y = (rightY-leftY)/((rightX-leftX)/2)
$(newDiv).css("background-color", "red")
$(newDiv).css("z-index","2")
$(newDiv).css("left",(leftX+i*4))
$(newDiv).css("top",(leftY+i*y))
$(newDiv).css("height",y+"px")
$(newDiv).css("width","4px")
$(newDiv).css("position","absolute")
$("#detail").append(newDiv)
}
}
}
</script>
</head>
<body>
<div align="center" style="margin-top: 20pxmargin-left: 30%" id="detail">
<div class="left" style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px" onclick="drawThis(this)">a</div>
<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px">1</div>
<br />
<br />
<br />
<br />
<br />
<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px">b</div>
<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px">2</div>
<br />
<br />
<br />
<br />
<br />
<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px">c</div>
<div class="right" style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px" onclick="drawThis(this)">3</div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）