Der Inhalt dieses Artikels befasst sich mit der Verwendung von Canvas zum Zeichnen einer Roadmap (Code). Freunde in Not können sich darauf beziehen.
<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>Verwandte Empfehlungen:
HTML5 Canvas – Einführung in das Zeichnen von Linien mit paths_html5 Tutorial-Techniken
HTML5-Zeichnung Eine einfache und schöner Schaltplan
Eine detaillierte Einführung in den Implementierungsfall des einfachen HTML5-Online-Zeichentools
Das obige ist der detaillierte Inhalt vonSo zeichnen Sie eine Roadmap mit Canvas (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was ist der Unterschied zwischen JD International Self-Operated und JD Self-Operated?
Standby-Tastenkombination
Was soll ich tun, wenn mein Laufwerk C rot wird?
Einführung in die Verwendung von Messageboxen
Was ist Hadoop?
So funktioniert der Temperatursensor
Was ist der Baidu-Index?
Projektor-Handy
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
