如何用canvas画出一个路线图（代码）
导读：收集整理的这篇文章主要介绍了如何用canvas画出一个路线图（代码），觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章给大家带来的内容是关于如何用canvas画出一个路线图（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对...
收集整理的这篇文章主要介绍了如何用canvas画出一个路线图（代码），觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章给大家带来的内容是关于如何用canvas画出一个路线图（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。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>
相关推荐：
HTML5 canvas——用路径描画线条实例介绍_html5教程技巧
HTML5画一个简单呢好看的电路图
详细介绍HTML5简易在线画图工具的实现案例
以上就是如何用canvas画出一个路线图（代码）的详细内容，更多请关注其它相关文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何用canvas画出一个路线图（代码）
本文地址： https://pptw.com/jishu/584390.html