Home > Article > Web Front-end > How to draw a roadmap using canvas (code)
How to draw a roadmap using canvas (code)
- 不言Original
- 2018-08-15 17:02:403410browse
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.
<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>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：
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
Previous article：What does hgroup in HTML5 do? The specific usage of the hgroup tag in HTML5 is here. Click here to take a look.Next article：What does hgroup in HTML5 do? The specific usage of the hgroup tag in HTML5 is here. Click here to take a look.
Related articles
See more- AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds
- HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)
- Detailed explanation of image drawing examples in HTML5 canvas 9
- Regular expressions and new HTML5 elements
- How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server