实现js动态创建img并使用canvas画线连接_js 画布背景图上画线条-优快云博客

本文介绍了一种使用JavaScript动态创建图像元素，并利用Canvas进行线段绘制的方法，以实现跟踪和绘制路径的功能。通过监听背景图片变化，自动清除并重新绘制路径，确保了绘图的实时性和准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现js动态创建img，使用canvas画线连接img，当背景图更换时，重新绘制img及连接线。

前台页面

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Draw</title>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<style>
canvas {
/*background: url("/Content/Images/Office_CAD2.jpg");*/
background-size: 100% 100%;
}
</style>
<style>
/* Firefox old*/
@@-moz-keyframes blink {
0% {
opacity: 1;
}

50% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@@-webkit-keyframes blink {
0% {
opacity: 1;
}

50% {
opacity: 0;
}

100% {
opacity: 1;
}
}
/* IE */
@@-ms-keyframes blink {
0% {
opacity: 1;
}

50% {
opacity: 0;
}

100% {
opacity: 1;
}
}
/* Opera and prob css3 final iteration */
@@keyframes blink {
0% {
opacity: 1;
}

50% {
opacity: 0;
}

100% {
opacity: 1;
}
}

.blink-image {
-moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
-webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
-ms-animation: blink normal 2s infinite ease-in-out; /* IE */
animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
position: absolute;
/*top: 150px;
left: 150px;
display: none;*/
}
</style>
</head>
<body>
<canvas id="gycanvas"></canvas>
<script>
//铺满屏幕
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
document.getElementById("gycanvas").setAttribute("width", width);
document.getElementById("gycanvas").setAttribute("height", height);
//初始化
var context = document.getElementById("gycanvas").getContext("2d");
var lastX;
var lastY;
//获取容器的最后一张背景图片地址，用于与当前数据中的背景图片做判断是否切换背景
var lastBackImgUrl = $("#gycanvas").css("backgroundImage").replace('url(', '').replace(')', '').replace('"', '').replace('"', '');
var lastBackImg = lastBackImgUrl.substring(lastBackImgUrl.lastIndexOf('/'));
//创建图片
function drawmap(backImg) {
if (lastBackImg != backImg) {
console.log(lastBackImg, backImg);
reset();//如果更换图片，则清空线段及圆点
$("#gycanvas").css("background-image", "url(/Content/Images/" + backImg + ")");
lastBackImg = backImg;
lastY = 'a';//随便设置一个无法自动转换为数字的字符
lastX = 'b';//随便设置一个无法自动转换为数字的字符
}
}
//动态的画线
function drawline(x, y) {
console.log(x, y, lastX, lastY);
context.beginPath();
context.moveTo(lastX, lastY);
context.lineTo(x, y);
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
lastX = x;
lastY = y;
}
//清空画布
function reset() {
$('body img').remove();
canvas = document.getElementById("gycanvas");
context = canvas.getContext("2d");
//console.log(width, height);
context.clearRect(0, 0, width, height);
}
//画轨迹圆点
function drawimg(x, y) {
var img = document.createElement('img');
img.id = 'img';
img.src = '/Content/Images/redpoint.png';
img.alt = "测试";
img.style = 'position: absolute;left:' + x + 'px;top:' + y + 'px';
$('body').append(img);
};
//画闪烁圆点
function drawblinkimg(x, y) {
var img = document.createElement('img');
img.id = 'blink-image';
img.src = '/Content/Images/redpoint.png';
img.className = "blink-image";
img.style = 'position: absolute;left:' + x + 'px;top:' + y + 'px';
$('body').append(img);
}
//处理业务数据
function DoWork(data) {
data = JSON.parse(data);
var l = data.length;
for (var i = 0; i < l; i++) {
var x = data[i]['x'];
var y = data[i]['y'];
var map = data[i]['CAD_map_name'];
f(i, l, x, y, map);
}
}
//封装setTimeout，不然无法在for循环中使用
var f = function (i, l, x, y, map) {
setTimeout(function () {
drawmap(map);
drawline(x, y);
if (i < l - 1) {
drawimg(x, y);
}
else {
drawblinkimg(x, y);
}
}, 1000 * i);
}
//获取数据
function GetData() {
$.ajax({
type: "POST",
url: "/Track/GetDrawData?targetId=" + $("#id").val() + "&beginTime=" + $("#begin").val() + "&endTime=" + $("#end").val(),
dataType: "json",
cache: false,
async: false,
data: "",
success: function (data) {
DoWork(data);
},
error: function (xhr, state, errorThrown) {
console.log(xhr);
}

});
}
</script>
@*坐标x<input type="text" id="x" />
坐标y<input type="text" id="y" />
背景图<input type="text" id="backImg" value="1.jpg" />
<button id="btn" onclick="drawmap($('#backImg').val());drawline($('#x').val(),$('#y').val());drawimg($('#x').val(),$('#y').val())">划线</button>*@
人员id<input type="text" id="id" value="1" />
开始时间<input type="text" id="begin" value="2019-02-15 09:18:12" />
结束时间<input type="text" id="end" value="2019-02-15 09:18:30" />
<button id="btnSubmit" onclick="GetData()">获取数据并处理</button>
</body>
</html>

.net 后台

public JsonResult GetDrawData(string targetId, string beginTime, string endTime)
{
List<dynamic> list = new List<dynamic>();
using (IDbConnection connection = new MySqlConnection(connStr))
{
string query = @"SELECT a.add_time,a.x,a.y,b.CAD_map_name FROM demo_nursing_home.uwb_person_his_trajectory a,demo_nursing_home.uwb_cad_map b
where a.add_time between @beginTime and @endTime and a.CAD_map_id=b.CAD_map_id and a.target_id=@target_id";
list = connection.Query<dynamic>(query, new { @target_id = targetId, @beginTime = beginTime, @endTime = endTime }).ToList();

}
return Json(list.ToJson(), JsonRequestBehavior.AllowGet);
}