如何用canvas画出一个路线图（代码）
互联网
18-8-15
本篇文章给大家带来的内容是关于如何用canvas画出一个路线图（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
<head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta content="always" name="referrer"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0" name="viewport" /> <title>CITEK反向寻车</title> <script src="<%=basePath%>wui/js/jquery.js"></script> <link rel="stylesheet" href="<%=cssPath%>wui.css" type="text/css"></link> <script type="text/javascript" src="<%=basePath%>wui/js/line_tool.js"></script> <script type="text/javascript"> var arrPosX = [], arrPosY = []; <s:iterator value="listNode" status="bean"> //设置路线中点的横坐标和纵坐标的集合 arrPosX.push(<s:property value="posX" />); arrPosY.push(<s:property value="posY" />); </s:iterator> var arrRoundPosX = [], arrRoundPosY = []; //设置终点所在区域的范围点横坐标和纵坐标集合 <s:iterator value="positionsX" status="bean"> arrRoundPosX.push(<s:property />); </s:iterator> <s:iterator value="positionsY" status="bean"> arrRoundPosY.push(<s:property />); </s:iterator> var ctxBackground, canvasBackground; var ctxSource, canvasSource; var canvasWidth, canvasHeight; var imgStart, imgEnd, imgBackground,; var areaImage; var isStart = false; var scale = 1; var scaleInterval = 3; var scaleCount = 0; var runCount = 0; var step = 2; //像素 var moveX = 1; var moveY = 1; var currIndex = 0; var a = 0; var tmpIconPaths = [ //设置起点图标 "<%=basePath%>img/point_start.png", ]; var imgObjArr = []; var iLoadIndex = 0; /** * 将图标放入集合中 */ function loadIconImages(){ var oImg = new Image(); oImg.addEventListener('load', eventIconImagesLoaded, false); oImg.src = tmpIconPaths[iLoadIndex]; imgObjArr.push(oImg); } /** * 加载图标 */ function eventIconImagesLoaded(){ iLoadIndex++; if(iLoadIndex <= 3) { loadIconImages(); } else { loadImage(); } } /** * 加载背景图标 */ function loadImage(){ areaImage = new Image(); areaImage.addEventListener('load', eventAreaImageLoaded, false); areaImage.src ="<%=basePath%>image/img.jpg; } function eventAreaImageLoaded(){ initBase(); initScene(); initSprits(); start(); isStart = true; } /** * 初始化 */ function initBase() { imgStart = imgObjArr[0]; canvasBackground = document.getElementById("canvasBackground"); ctxBackground = canvasBackground.getContext("2d"); canvasSource = document.getElementById("canvasSource"); ctxSource = canvasSource.getContext("2d"); canvasWidth = areaImage.width; canvasHeight = areaImage.height; var bodyWidth = document.body.clientWidth-10; var bodyHeight = document.body.clientHeight-10; var tmpCavW = canvasWidth; var tmpCavH = canvasHeight; if(canvasWidth > bodyWidth) { canvasWidth = bodyWidth; canvasHeight = canvasWidth * (tmpCavH/tmpCavW); } if(canvasHeight > bodyHeight){ canvasHeight = bodyHeight; canvasWidth = canvasHeight * (tmpCavW/tmpCavH); } canvasBackground.width = canvasWidth; canvasBackground.height = canvasHeight; canvasSource.width = canvasWidth; canvasSource.height = canvasHeight; moveX = arrPosX[0] * canvasWidth; moveY = arrPosY[0] * canvasHeight; } /** * 初始化画布 */ function initScene() { ctxBackground.drawImage(areaImage, 0, 0, canvasWidth, canvasHeight); } /** * 开始绘图 */ function initSprits() { /* 绘制路线的白底 */ ctxBackground.beginPath(); ctxBackground.strokeStyle = "white"; ctxBackground.lineWidth = 8; ctxBackground.lineCap = "round"; ctxBackground.lineJoin = "miter"; ctxBackground.miterLimit = 30; for(var i=1; i < arrPosX.length; i++){ ctxBackground.moveTo(canvasWidth * arrPosX[i-1], canvasHeight * arrPosY[i-1]); //指定一条线段的起点 ctxBackground.lineTo(canvasWidth * arrPosX[i], canvasHeight * arrPosY[i]); //指定一条线段的终点 } ctxBackground.stroke(); /* 绘制路线的红线 */ ctxBackground.beginPath(); //是通过覆盖白底实现的 ctxBackground.strokeStyle = "rgba(255,0,0,1)"; ctxBackground.lineWidth = 4; ctxBackground.lineCap = "round"; ctxBackground.lineJoin = "miter"; ctxBackground.miterLimit = 30; for(var i=1; i < arrPosX.length; i++){ ctxBackground.moveTo(canvasWidth * arrPosX[i-1], canvasHeight * arrPosY[i-1]); //指定一条线段的起点 ctxBackground.lineTo(canvasWidth * arrPosX[i], canvasHeight * arrPosY[i]); //指定一条线段的终点 } ctxBackground.stroke(); /* 绘制终点区域 */ ctxSource.clearRect(0, 0, canvasWidth,canvasHeight); ctxBackground.beginPath(); ctxBackground.strokeStyle = "rgba(255,0,0,1)"; //颜色 ctxBackground.lineWidth = 0.5; ctxBackground.fillStyle = "rgba(255,0,0,0)"; //透明度 ctxBackground.moveTo(canvasWidth * arrRoundPosX[0], canvasHeight * arrRoundPosY[0]); //指定一条线段的起点 for(var i=1; i < arrRoundPosX.length; i++){ ctxBackground.lineTo(canvasWidth * arrRoundPosX[i], canvasHeight * arrRoundPosY[i]); //指定一条线段的终点 } ctxBackground.lineTo(canvasWidth * arrRoundPosX[0], canvasHeight * arrRoundPosY[0]); ctxBackground.closePath(); ctxBackground.fill(); ctxBackground.stroke(); /* 绘制起点图标 */ ctxBackground.drawImage( imgStart, canvasWidth * arrPosX[0] - imgStart.width * 0.25, canvasHeight * arrPosY[0] - imgStart.height * 0.25 - imgStart.height * 0.25, imgStart.width * 0.5, imgStart.height * 0.5); } /** * 设置图标的跳动 */ function loop(){ if(!isStart) return; if(scale > 1.8) scale = 1; if(scaleCount > 999999) scaleCount = 0; if(runCount > 999999) runCount = 0; ctxSource.save(); ctxSource.clearRect(0,0,canvasWidth,canvasHeight); /* 设置起点图标的跳动 */ ctxSource.translate( canvasWidth * arrPosX[0] - imgStart.width * 0.25 +imgStart.width*0.25, canvasHeight * arrPosY[0] - imgStart.height * 0.25+imgStart.height*0.25); ctxSource.scale(scale, scale); ctxSource.shadowOffsetX = 3; // 阴影x轴偏移 ctxSource.shadowOffsetY = 4; // 阴影y轴偏移 ctxSource.shadowBlur = 2; // 模糊尺寸 ctxSource.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 颜色 ctxSource.drawImage( imgStart, - imgStart.width * 0.25, - imgStart.height * 0.25 - imgStart.height * 0.25, imgStart.width * 0.5, imgStart.height * 0.5); ctxSource.restore(); ctxSource.save(); /* 设置终点区域的透明度变化 */ if (runCount % 4 == 0) { a = a + 0.1; } if (a > 0.6) { a = 0; } ctxSource.strokeStyle = "rgba(255,0,0,1)"; ctxSource.lineWidth = 10; ctxSource.fillStyle = "rgba(255,0,0,"+a+")"; ctxSource.moveTo(canvasWidth * arrRoundPosX[0], canvasHeight * arrRoundPosY[0]); //指定一条线段的起点 for(var i=1; i < arrRoundPosX.length; i++){ ctxSource.lineTo(canvasWidth * arrRoundPosX[i], canvasHeight * arrRoundPosY[i]); //指定一条线段的终点 } ctxSource.lineTo(canvasWidth * arrRoundPosX[0], canvasHeight * arrRoundPosY[0]); ctxSource.closePath(); ctxSource.fill(); ctxSource.restore(); ctxSource.save(); scaleCount++; runCount++; if(scaleCount % scaleInterval == 0){ scale += 0.1; } } /** * 设置标题和图片的长宽高和跳动频率 */ function start(){ $("#monitor_list_box").width = canvasWidth + "px"; $("#monitor_list_box").height = canvasHeight + "px"; $("#canvasBackground").width = canvasWidth + "px"; $("#canvasBackground").height = canvasHeight + "px"; $("#canvasSource").width = canvasWidth + "px"; $("#canvasSource").height = canvasHeight + "px"; window.setInterval(loop,1000/30); //60帧 } </script> <style type="text/css"> #monitor_list_box {width:100%; height:auto; overflow: auto;} #monitor_list_box canvas {position:absolute;width:100%; height:auto;} </style> <body> <div id="monitor_list_box"> <canvas id="canvasBackground"> Your browser does not support the canvas element. </canvas> <canvas id="canvasSource"> Your browser does not support the canvas element. </canvas> </div> </body>相关推荐：
HTML5 Canvas——用路径描画线条实例介绍_html5教程技巧
HTML5画一个简单呢好看的电路图
详细介绍HTML5简易在线画图工具的实现案例
以上就是如何用canvas画出一个路线图（代码）的详细内容，更多内容请关注技术你好其它相关文章！
免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场
相关资讯
扫码关注公众号
技术文章 / 下载软件
趣味内容 / 专业带飞
