How to draw a roadmap using canvas (code)-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

How to draw a roadmap using canvas (code)

不言

Aug 15, 2018 pm 05:02 PM

The content of this article is about how to use canvas to draw a roadmap (code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

<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>

Copy after login

Related recommendations:

HTML5 Canvas - Examples of using paths to draw lines_html5 tutorial techniques

HTML5 drawing A simple and beautiful circuit diagram

Details introduction to the implementation case of HTML5 simple online drawing tool

The above is the detailed content of How to draw a roadmap using canvas (code). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Roblox: Dead Rails - How To Tame Wolves

4 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Grow A Garden - Complete Mutation Guide

2 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1655

CakePHP Tutorial

1414

Laravel Tutorial

1307

PHP Tutorial

1254

C# Tutorial

1228

Related knowledge

What exactly does H5 page production mean? Apr 06, 2025 am 07:18 AM

H5 page production refers to the creation of cross-platform compatible web pages using technologies such as HTML5, CSS3 and JavaScript. Its core lies in the browser's parsing code, rendering structure, style and interactive functions. Common technologies include animation effects, responsive design, and data interaction. To avoid errors, developers should be debugged; performance optimization and best practices include image format optimization, request reduction and code specifications, etc. to improve loading speed and code quality.

How to run the h5 project Apr 06, 2025 pm 12:21 PM

Running the H5 project requires the following steps: installing necessary tools such as web server, Node.js, development tools, etc. Build a development environment, create project folders, initialize projects, and write code. Start the development server and run the command using the command line. Preview the project in your browser and enter the development server URL. Publish projects, optimize code, deploy projects, and set up web server configuration.

How to make h5 click icon Apr 06, 2025 pm 12:15 PM

The steps to create an H5 click icon include: preparing a square source image in the image editing software. Add interactivity in the H5 editor and set the click event. Create a hotspot that covers the entire icon. Set the action of click events, such as jumping to the page or triggering animation. Export H5 documents as HTML, CSS, and JavaScript files. Deploy the exported files to a website or other platform.

How to make pop-up windows with h5 Apr 06, 2025 pm 12:12 PM

H5 pop-up window creation steps: 1. Determine the triggering method (click, time, exit, scroll); 2. Design content (title, text, action button); 3. Set style (size, color, font, background); 4. Implement code (HTML, CSS, JavaScript); 5. Test and deployment.

What application scenarios are suitable for H5 page production Apr 05, 2025 pm 11:36 PM

H5 (HTML5) is suitable for lightweight applications, such as marketing campaign pages, product display pages and corporate promotion micro-websites. Its advantages lie in cross-platformity and rich interactivity, but its limitations lie in complex interactions and animations, local resource access and offline capabilities.

Is h5 same as HTML5? Apr 08, 2025 am 12:16 AM

"h5" and "HTML5" are the same in most cases, but they may have different meanings in certain specific scenarios. 1. "HTML5" is a W3C-defined standard that contains new tags and APIs. 2. "h5" is usually the abbreviation of HTML5, but in mobile development, it may refer to a framework based on HTML5. Understanding these differences helps to use these terms accurately in your project.

What Does H5 Refer To? Exploring the Context Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5 Code: Accessibility and Semantic HTML Apr 09, 2025 am 12:05 AM

H5 improves web page accessibility and SEO effects through semantic elements and ARIA attributes. 1. Use, etc. to organize the content structure and improve SEO. 2. ARIA attributes such as aria-label enhance accessibility, and assistive technology users can use web pages smoothly.

See all articles