Canvas动态加载图片、画线、画点

HTML代码：

<canvas id="cvs" width="400" height="400" style="margin:20px auto; display: block;">
canvas>

JS代码

<script type="text/javascript" th:inline="javascript">// 画点function draw_point(ctx, point) {console.log(point);//设置绘制颜色ctx.fillStyle="#fb0606";//绘制成矩形// ctx.arc(point.x, point.y,5, 0, Math.PI * 5);ctx.fillRect(point.x-4,point.y-4,8,8);//设置字体样式ctx.font = "12px bold 宋体";//绘制文字ctx.fillText("("+point.x+","+point.y+")",point.x,point.y);// ctx.fill();}// 划线function getLine(ctx, prevXY, nextXY) {ctx.beginPath();ctx.strokeStyle="#0000FF";ctx.moveTo(prevXY.x, prevXY.y);ctx.lineTo(nextXY.x, nextXY.y);ctx.stroke();}layui.use(['form', 'layedit', 'upload', 'laydate'], function() {let form = layui.form, layer = layui.layer, laydate = layui.laydate, $ = layui.jquery, upload = layui.upload;let date_list = [];let canvas = document.getElementById("cvs");let ctx = canvas.getContext("2d");ctx.globalCompositeOperation="source-over";let img = new Image();// 点击加载地图$("#get_map").click(function () {let id = $("#gameMapUrl").val();date_list = [];$.get(context+"/game/point_map/"+id, function (res) {ctx.clearRect(0,0,canvas.width,canvas.height);img.src = res.extend.msg.mapUrl;// 定时器加载图片setTimeout(function(){var naturalWidth = img.width;var naturalHeight = img.height;canvas.width = naturalWidth;canvas.height = naturalHeight;ctx.drawImage(img, 0, 0, naturalWidth, naturalHeight);},3000);});});// 地图画线canvas.addEventListener("click", function(event) {let ev = event || window.event;let x, y;x = ev.clientX - canvas.getBoundingClientRect().left;y = ev.clientY - canvas.getBoundingClientRect().top;let point = {x : x, y : y};console.log(point);draw_point(ctx, point);if(date_list.length > 0){getLine(ctx, date_list[date_list.length-1], point);}date_list.push(point);console.log(date_list);console.log(date_list.length);});// 删除线和点$("#del_map_point").click(function () {if(date_list.length > 0){let point_date = date_list.pop();console.log(point_date);ctx.clearRect(point_date.x-4, point_date.y-4, 8, 8);}})})
</script>

使用了Layui的ui框架，不影响使用，可以自己使用ajax提交请求！
但是在清除画的点和画的线，效果不好，有那个大佬知道，请不吝赐教，感谢！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！