如何用canvas畫出一個路線圖（程式碼）-H5教程-PHP中文網

首頁

web前端

H5教程

如何用canvas畫出一個路線圖（程式碼）

不言

Aug 15, 2018 pm 05:02 PM

這篇文章帶給大家的內容是關於如何用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(&#39;load&#39;, 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(&#39;load&#39;, 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 = &#39;rgba(0, 0, 0, 0.5)&#39;; // 颜色    
            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>

登入後複製