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()
},
方法一：Canvas或svg绘制已知两点求直线方程，渲染这条线上的点即可。方法二：用div绘制两个点已经可以确定一个直角三角形，已知对边和邻边，求出角度及斜边的长度，用css3属性旋转即可。点点连线：
<style>*{padding: 0
margin: 0}
#can{border:1px solid #ccc}
</style>
<body>
<canvas id="can" width="600" height="600"></canvas>
</body>
<script>
var _canvas=document.getElementById("can")
var obj=_canvas.getContext("2d")
var arr=[]
_canvas.onclick = function(e){
obj.beginPath()
obj.moveTo(arr[0],arr[1])
obj.lineTo(e.offsetX,e.offsetY)
obj.stroke()
arr=[]
arr.unshift(e.offsetX)
arr.push(e.offsetY)
}
</script>
模仿画笔：
<style type="text/css">#_canvas{
background-color: rgb(240,240,240)
}
</style>
</head>
<body>
<canvas id="_canvas">sorry, your broswer does not support html5!</canvas>
<script type="text/javascript">
var canvas_ = document.getElementById("_canvas")
//全屏
canvas_.setAttribute("width",screen.width)
canvas_.setAttribute("height",screen.height)
var context = canvas_.getContext("2d")
context.strokeStyle = "blue"
context.lineWidth = 4
var array_paint = []
var current_y = 0
var current_x = 0
//判断鼠标是否按下
var m_down = false
function paint()
{
context.beginPath()
context.moveTo(array_paint[0][0],array_paint[0][1])
if(array_paint.length == 1)
context.lineTo(array_paint[0][0] +1,array_paint[0][1] +1)
else
{
var i =1
for(i in array_paint)
{
context.lineTo(array_paint[i][0],array_paint[i][1])
context.moveTo(array_paint[i][0],array_paint[i][1])
}
}
context.closePath()
context.stroke()
}
//按下鼠标
canvas_.onmousedown = function(event)
{
m_down = true
current_x = event.offsetX
current_y = event.offsetY
array_paint.push([current_x,current_y])
paint()
}
//鼠标松开,清空数据
canvas_.onmouseup = function(event)
{
m_down = false
array_paint = []
}
//鼠标按下后拖动
canvas_.onmousemove = function(event)
{
if(m_down)
{
current_x = event.offsetX
current_y = event.offsetY
array_paint.push([current_x,current_y])
paint()
}
}
</script>
</body>
