如何用canvas画出一个路线图（代码）

来源：动视网责编：小采时间：2020-11-27 15:04:36

如何用canvas画出一个路线图（代码）

如何用canvas画出一个路线图（代码）:本篇文章给大家带来的内容是关于如何用canvas画出一个路线图（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。<head> <meta http-equiv="content-type" content="text/html;

推荐度：

点击下载本文 文档为doc格式

导读如何用canvas画出一个路线图（代码）:本篇文章给大家带来的内容是关于如何用canvas画出一个路线图（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。<head> <meta http-equiv="content-type" content="text/html;

本篇文章给大家带来的内容是关于如何用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>

如何用canvas画出一个路线图（代码）

推荐度：

点击下载本文 文档为doc格式

标签：如何使用画出线路图

热门焦点

如何用canvas画出一个路线图（代码）

如何用canvas画出一个路线图（代码）

如何用canvas画出一个路线图（代码）

最新推荐

猜你喜欢

热门推荐