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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
