JS亮点之间画直线

最新推荐文章于 2023-10-24 09:39:23 发布

水洗的天空

最新推荐文章于 2023-10-24 09:39:23 发布

阅读量1.6k

点赞数 1

分类专栏： JS，两点画直线文章标签： javascript 两点画直线

本文链接：https://blog.csdn.net/qq734122899/article/details/72621965

版权

本文介绍了两种在HTML页面上用JavaScript实现画直线的方法。第一种方法利用点的坐标生成直线，通过调整参数实现不同样式。第二种方法利用HTML5的canvas元素，直接通过上下文对象的strokeStyle和lineWidth属性设置线条颜色和宽度，再用moveTo和lineTo方法定义起点和终点绘制直线。

摘要由CSDN通过智能技术生成

最近需求要在页面上画直线，下面有两个方法

第一种：这是通过点来生成一条直线

<html>
<head>
<script type="text/javascript">

/************* 画点 **************
x,y 点所在的屏幕坐标（像素）
color 颜色（字符串值）
size 大小（像素）
**********************************/
function drawDot(x,y,color,size){
document.write( " <table border= '0 ' cellspacing=0 cellpadding=0> <tr> <td style= 'position: absolute; left: "+(x)+ "; top: "+(y)+ ";background-color: "+color+ " ' width= "+size+ " height= "+size+ "> </td> </tr> </table> ")
}

/************* 画直线 **************
x1,y1 起点所在的屏幕坐标（像素）
x2,y2