Method for drawing a roadmap with Canvas

This article mainly introduces the method of drawing a road map with Canvas, having a reference value, and friends needed can be referred to. I hope that everyone has a big gain after reading this article. Let’s take a look at you with everyone.

     Citek reverse search   WUI / JS / jQuery.js ">  wui.css "type =" text / css ">  <script src=" wui / js / line_tool.js">  <link rel="stylesheet" href=" var arrposx = [], arrposy = [];  / / Set the horizontal coordinates and orders of the point in the route Arrposx.push (<script type="text/javascript" src="); arrposy.push ();  var arrroundposx = [], arrroundposy = []; / / Set the range of the range of the end point of the area, the horizontal coordinates and ordinate sets  arrroundposx.push (); ); ); ); );  VAR CTXBACKGROUND, CANVASBACKGROUND; var CtxSource, Canvassource; Var canvaswidth;Var Imgstart, ImgBackground ,; var isstart = false; var scale = 1; var scaleinterval = 3; var scalecount = 0; var runt = 0; var step = 2; // pixel var Movex = 1; VAR Movey = 1; var currindex = 0; var a = 0; var tmpiconpaths = [// sets the starting icon " img / point_start.png",]; var imgobjarr = []; var iMgobjarr = []; var iMgobjarr = 0; / ** * Put the icon into the collection * / function loadiconImages () {var oimg = new image (); objectg.addeventListener ('loading', eventiconimagesloaded, false); objects [iLoadIndex]; IMGObjArr.push (oImg);} / ** * loading icon * / function eventIconImagesLoaded () {iLoadIndex ++; if (iLoadIndex  image / img.jpg;} function eventAreaImageLoaded () {initBase (); initScene (); initSprits (); start (); isStart = true;} / ** * initialization * / function initBase () {imgStart = imgObjArr [0]; canvasBackground = document.getElementById ( "canvasBackground"); ctxBackground = canvasBackground.getContext ( "2d "); canvassource = document.getlementByid (" 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;} / ** * initialize canvas * / function initScene () {ctxBackground.drawImage (areaImage, 0, 0, canvasWidth, canvasHeight);} / ** * begin drawing * / function initSprits () {/ * white line drawn * / ctxBackground.beginPath (); ctxBackground.strokeStyle = "white"; ctxBackground.lineWidth = 8; ctxBackground.lineCap = "round"; ctxbackround.LineJoin = "miter"; ctxbackground.miterlimit = 30; for (var i = 1; i  1.8) scale = 1; if (scalecount> 999999) ScalecoUnt = 0; if (Runcount> 99999) runcount = 0; ctxSource.save (); CTXSource.ClearRect (0, 0, canvaswidth, canvasheight); / * Set the starting icon to beat * / 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; // Shadow X-axis offset CTXSource.ShadowoffSTY = 4; // Shadow Y axis offset CTXSource.Shadowblur = 2; // Fuzzy Size CtxSource.ShadowColor = 'RGBA (0, 0, 0, 0.5)'; // Color 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 (); / * Set transparency change in the end area * / 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," + ")"; CTXSource.moveto (canvaswidth * arrroundposx [0], canvasheight * arroundposy [0]); // Specify the starting point for a line segment (VAR i = 1; i  <= 3) {
                loadIconImages();
            } else {
                loadImage();
            }
        }
        
        /**
         * 加载背景图标
         */
        function loadImage(){
               areaImage = new Image();
               areaImage.addEventListener('load', eventAreaImageLoaded, false);
               areaImage.src =" #monitor_list_box {width: 100%; Height: auto; overflow: auto;} #monitor_list_box canvas {POSITION: Absolute; Width: 100%; Height: auto;} < 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++){
                 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帧
        }
        
      Your Browser Does Not Support The Canvas Element. 
Thank you can read this article carefully, I hope that Xiaobian sharing with the method of drawing a road map with Canvas helps everyone. At the same time, I also hope that you will support Tumi clouds, pay attention to Tumi cloud industry information channel, you will find TUMI clouds in trouble, the detailed solution is waiting for you!
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment