It's just a small example. The only thing left is to draw the road and use setinterval to change the route. I haven't figured out the specific principle. If you are interested, I hope to discuss it with me.
Reference 1
Reference 2
Reference 3
Reference 4
Reference 5
Reference 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>
The following is the
main.js in the drawRoad3 function
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);
If both add i to the right, -i is to the left,
skysize+50 is a straight line,
skysize+150 is uphill and
skysize is not added, it is downhill
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);
}
*/