Es solo un pequeño ejemplo. Lo único que queda es dibujar la carretera y usar setinterval para cambiar la ruta. No he descubierto el principio específico. Si estás interesado, espero discutirlo conmigo.
Referencia 1
Referencia 2
Referencia 3
Referencia 4
Referencia 5
Referencia 6
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
This is my JSP page. <br>
</body>
</html>
El siguiente es el
main.js en la función drawRoad3
ctx.quadraticCurveTo((((canvas.width / 2) + i)) + 10, skySize +50, (canvas.width + max) / 2, canvas.height);
ctx.quadraticCurveTo((((canvas.width / 2) + i)) + 10, skySize +50, (canvas.width + max) / 2, canvas.height);
Si ambos agregan i a la derecha, -i está a la izquierda,
skysize + 50 es una línea recta,
skysize + 150 es cuesta arriba y
skysize no se agrega, es cuesta abajo
var canvas=null;
var offset= 0;
var ctx=null;
var ground="#8FC04C";
var groundDark= "#73B043";
var roadLine= "#FFF";
var road="#606a7c";
var min=76;
var max= 700;
//var xpos= 0;
var currentCurve= 0;
var skySize= 120;
var size= 350;
var startDark= true;
//var ctx2=null;
canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
//更改路面时 要先画草地 然后画路 相当于清空画布
var i=-30;
setInterval(function (){
drawGround(ctx,offset, ground,groundDark, canvas.width);
i=i+10;
console.log(i);
drawRoad3(min,max, road,i);
},1000);
drawGround(ctx,offset, ground,groundDark, canvas.width);
//drawRoad(min + 6, max + 3, roadLine);
drawRoad(min,max, road);
function drawRoad(min, max, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(((canvas.width + min) / 2) , skySize);
//ctx.moveTo(788 ,120);
//两个都改
//skysize+152是下坡 ；
//单纯skysize是下坡
//skysize+52是直路
//贝塞尔曲线 4个参数ctx.quadraticCurveTo(20,100,200,20);
ctx.quadraticCurveTo((((canvas.width / 2) + min)) + 10, skySize+50, (canvas.width + max) / 2, canvas.height);
//+min是直线
//上面的不加min是向右拐弯 -min是大幅度向右
//两个都改
//skysize+152是下坡 ；
//单纯skysize是下坡
//skysize+52是直路
console.log(canvas.height);
ctx.lineTo((canvas.width - max) / 2, canvas.height);
ctx.quadraticCurveTo((((canvas.width / 2) - min)) - 10, skySize+50 , ((canvas.width - min) / 2) , skySize);
//-min是直线
//上面的不减min是向左 加min是大幅度向左
ctx.closePath();
ctx.fill();
}
function drawRoad3(min, max, color,i) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(((canvas.width + min) / 2) , skySize);
//ctx.moveTo(788 ,120);
//skysize+152是下坡 ；
//单纯skysize是下坡
//skysize+52是直路
//两个都-i是向左
//两个都+i是向右
//贝塞尔曲线 4个参数ctx.quadraticCurveTo(20,100,200,20);
if(i<40){
//两个都-i是向左
ctx.quadraticCurveTo((((canvas.width / 2) - i)) + 10, skySize +50, (canvas.width + max) / 2, canvas.height);
ctx.lineTo((canvas.width - max) / 2, canvas.height);
ctx.quadraticCurveTo((((canvas.width / 2) - i)) - 10, skySize +50, ((canvas.width - min) / 2) , skySize);
}
else if(i>=40&&i<130){
//两个都+i是向右
ctx.quadraticCurveTo((((canvas.width / 2) + i)) + 10, skySize +50, (canvas.width + max) / 2, canvas.height);
console.log(canvas.height);
ctx.lineTo((canvas.width - max) / 2, canvas.height);
ctx.quadraticCurveTo((((canvas.width / 2) + i)) - 10, skySize +50, ((canvas.width - min) / 2) , skySize);
}
else if(i>=130&&i<=160){
console.log("dao 130");
ctx.quadraticCurveTo((((canvas.width / 2) + min)) + 10, skySize , (canvas.width + max) / 2, canvas.height);
console.log(canvas.height);
ctx.lineTo((canvas.width - max) / 2, canvas.height);
ctx.quadraticCurveTo((((canvas.width / 2) - min)) - 10, skySize, ((canvas.width - min) / 2) , skySize);
}
else if(i>=160&&i<=190){
console.log("dao 160");
ctx.quadraticCurveTo((((canvas.width / 2) + min)) + 10, skySize , (canvas.width + max) / 2, canvas.height);
console.log(canvas.height);
ctx.lineTo((canvas.width - max) / 2, canvas.height);
ctx.quadraticCurveTo((((canvas.width / 2) - min)) - 10, skySize, ((canvas.width - min) / 2) , skySize);
}
else if(i>=190){
console.log("dao 130");
ctx.quadraticCurveTo((((canvas.width / 2) + min)) + 10, skySize+50 , (canvas.width + max) / 2, canvas.height);
console.log(canvas.height);
ctx.lineTo((canvas.width - max) / 2, canvas.height);
ctx.quadraticCurveTo((((canvas.width / 2) - min)) - 10, skySize+50, ((canvas.width - min) / 2) , skySize);
}
ctx.closePath();
ctx.fill();
}
function drawRoad2(min, max, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(((canvas.width + min) / 2) , skySize);
//ctx.moveTo(788 ,120);
//skysize+152是下坡 ；
//单纯skysize是下坡
//skysize+52是直路
//贝塞尔曲线 4个参数ctx.quadraticCurveTo(20,100,200,20);
ctx.quadraticCurveTo((((canvas.width / 2) + min)) + 10, skySize + 152, (canvas.width + max) / 2, canvas.height);
//+min是直线
//上面的不加min是向右拐弯 -min是大幅度向右
console.log(canvas.height);
ctx.lineTo((canvas.width - max) / 2, canvas.height);
ctx.quadraticCurveTo((((canvas.width / 2) - min)) - 10, skySize + 52, ((canvas.width - min) / 2) , skySize);
//-min是直线
//上面的不减min是向左 加min是大幅度向左
ctx.closePath();
ctx.fill();
}
function norm(value, min, max) {
return (value - min) / (max - min);
}
function drawGround(ctx, offset, lightColor, darkColor, width) {
var pos = (skySize - min) + offset;
stepSize = 1;
drawDark = true;
firstRow = true;
ctx.fillStyle = lightColor;
ctx.fillRect(0,skySize, width, size);
}
/*
function drawGround(ctx, offset, lightColor, width) {
ctx.fillStyle = lightColor;
ctx.fillRect(0, skySize, width, size);
}
*/