canvas绘制任意两点的动态直线
汪志业
先简单分析一下原理
对于任意两点 (x1,y1） (x2,y2)
如果斜率存在，y=kx+b k=(y2-y1)/(x2-x1) b=y1-kx1（）
不存在的话，就是垂直的情况 x=m y定义在[y1,y2]上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Canvas绘制任意两点间的动态直线</title>
<link rel="stylesheet" href="./style.css"/>
<script src="../jquery-3.1.0.min.js"></script>
</head>
<body>
<div class="drawing-container">
<canvas id="canvas">
</div>
<script src="./action.js"></script>
</body>
</html>看看CSS文件
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.drawing-container{
width:100%;
height:1000px;
}
#canvas{
display:block;
background-color:rgb(12, 15, 33);
}
JS文件
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
/*
canvas 元素的自适应大小与重新绘制
-------------------------------------------------------------------------------------
*/
function canvasResize(){
canvas.width=$(".drawing-container").width();
canvas.height=$(".drawing-container").height();
}
canvasResize();
$(window).resize(function(){
canvasResize();
});
//绘制任意两点之间的动态直线
/*
画动态直线
@(x1,y1) 起点
@(x2,y2) 终点
*/
function drawDynamicLine(x1,y1,x2,y2){
if(x1==x2)
{
drawVerticalLine(x1,y1,x2,y2); /*斜率不存在的情况*/
}else
{
drawCommonLine(x1,y1,x2,y2); /*斜率为正或者负或者0*/
}
/*k存在的情况*/
function drawCommonLine(x1,y1,x2,y2)
{
//y=kx+b
var k=(y2-y1)/(x2-x1) //斜率k 正 负 0
var b=y1-k*x1 //常数b
var i=0;
var flag=compare(x1,x2);
function draw(){
var xi=x1+i;
var yi=k*xi+b;
var xj=x1+i+5 //控制步长决定绘制的是虚线还是实线
var yj=k*xj+b;
drawLine(xi,yi,xj,yj);
i+=20*flag;
if(Math.abs(i)<=Math.abs(x1-x2))
{
window.setTimeout(function(){
draw();
},50);
}
}
draw();
}
/*k不存在，也就是垂直的情况*/
function drawVerticalLine(x1,y1,x2,y2){
var i=0;
var flag=compare(y1,y2);
function draw(){
var yi=y1+i;
var yj=y1+i+5*flag;
drawLine(x1,yi,x2,yj);
i+=20*flag;
if(Math.abs(i)<=Math.abs(y1-y2))
{
window.setTimeout(function(){
draw();
},50);
}
}
draw();
}
/*比较函数*/
function compare(a,b){
if(a<b){
return 1;
}else
{
return -1;
}
}
/*线条片段*/
function drawLine(x1,y1,x2,y2)
{
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineWidth=1;
ctx.strokeStyle="white";
ctx.stroke();
ctx.closePath();
}
/*清除画布*/
function clear(){
ctx.clearRect(0,0,canvas.width,canvas.height);
}
}
drawDynamicLine(100,100,400,100);
drawDynamicLine(400,100,400,800);
drawDynamicLine(400,800,400,800);
drawDynamicLine(400,800,100,800);
drawDynamicLine(100,800,100,100);
drawDynamicLine(100,100,400,800);
类似资料：