Question

我要建立评分系统，我现在有这个系统：

Click to open gif

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>home page</title>
<style type="text/css">
.imagefill {
	margin: 0px;
	padding: 0px;
	background-attachment: scroll;
	background-image: url(file:///C|/Users/Owner/Downloads/virtual%20reality%20check-20190119T220656Z-001/virtual%20reality%20check/sunset.gif);
	background-repeat: repeat;
}
</style>
</head>

<body background-image: src ('sunset.gif');
background-size: cover;>
<img src="file:///C|/Users/Owner/Downloads/virtual reality check-20190119T220656Z-001/virtual reality check/vrc.png" alt="virtual reality check" width="2268" height="3024" usemap="#Map" class="imagefill" object-fit: cover />
<map name="Map">
  <area shape="poly" coords="1372,1053,1375,1084,1375,1125,1380,1153,1387,1189,1392,1231,1399,1266,1410,1306,1419,1326,1446,1350,1467,1356,1488,1366,1506,1377,1513,1383,1531,1398,1549,1414,1564,1420,1579,1434,1593,1467,1611,1492,1618,1515,1630,1531,1636,1554,1645,1581,1648,1608,1650,1642,1654,1663,1651,1684,1651,1704,1654,1728,1656,1753,1665,1731,1674,1701,1680,1678,1696,1653,1710,1629,1720,1590,1722,1560,1726,1539,1726,1519,1726,1492,1726,1470,1726,1446,1725,1420,1723,1384,1717,1353,1711,1315,1696,1284,1689,1260,1672,1218,1659,1195,1639,1158,1612,1135,1576,1096,1557,1075,1525,1054,1513,1044,1501,1033,1468,1032,1467,1056,1401,1053" href="file:///C|/Users/Owner/Downloads/virtual reality check-20190119T220656Z-001/virtual reality check/Trade.html">
  <area shape="poly" coords="1600,1117,1600,1096,1606,1060,1609,1039,1624,1035,1665,1038,1711,1039,1749,1038,1774,1038,1812,1030,1851,1023,1887,1015,1909,1008,1909,1042,1900,1092,1897,1132,1894,1167,1890,1200,1888,1242,1885,1275,1881,1302,1873,1330,1869,1354,1852,1392,1837,1426,1810,1459,1809,1467,1782,1489,1761,1513,1740,1549,1726,1554,1729,1522,1731,1494,1732,1462,1731,1407,1725,1380,1723,1353,1717,1326,1710,1294,1693,1257,1681,1228,1662,1194,1647,1165,1626,1143,1609,1131" href="file:///C|/Users/Owner/Downloads/virtual reality check-20190119T220656Z-001/virtual reality check/Fire.html">
  <area shape="poly" coords="1200,1708,1218,1719,1224,1734,1242,1755,1254,1768,1266,1783,1282,1801,1300,1818,1314,1834,1326,1846,1341,1857,1348,1869,1362,1884,1380,1912,1395,1932,1410,1957,1420,1980,1431,2001,1441,2029,1447,2055,1450,2074,1456,2104,1456,2133,1456,2158,1449,2190,1446,2214,1437,2244,1423,2269,1401,2304,1375,2334,1330,2233,1320,2203,1312,2206,1306,2229,1284,2188,1260,2122,1228,2052,1206,1993,1186,1942,1174,1900,1167,1867,1162,1846,1156,1825,1158,1795,1162,1771,1168,1753,1176,1734" href="file:///C|/Users/Owner/Downloads/virtual reality check-20190119T220656Z-001/virtual reality check/Food.html">
  <area shape="poly" coords="1345,1291,1368,1296,1387,1309,1413,1326,1434,1341,1455,1351,1483,1366,1497,1372,1522,1393,1542,1416,1567,1426,1582,1453,1599,1489,1617,1521,1633,1554,1642,1597,1645,1650,1647,1681,1648,1740,1647,1776,1645,1821,1638,1857,1632,1882,1602,1825,1584,1857,1572,1884,1558,1912,1543,1966,1527,2014,1530,2034,1525,2062,1516,2091,1506,2101,1492,2085,1497,2044,1485,2028,1459,1996,1434,1959,1417,1950,1386,1902,1362,1860,1341,1809,1321,1767,1303,1704,1291,1635,1282,1575,1275,1507,1279,1473,1287,1431,1296,1396,1329,1332" href="file:///C|/Users/Owner/Downloads/virtual reality check-20190119T220656Z-001/virtual reality check/Art.html">
  <area shape="poly" coords="1692,1167" href="#">
  <area shape="poly" coords="1108,1223,1165,1228,1203,1231,1236,1219,1273,1201,1296,1180,1320,1147,1332,1133,1305,1133,1269,1130,1245,1118,1219,1106,1198,1108,1176,1120,1153,1120,1137,1111,1119,1097,1084,1094,1062,1099,1023,1105,993,1109,958,1111,960,1126,981,1154,1011,1189,1045,1207,1084,1220" href="file:///C|/Users/Owner/Downloads/virtual reality check-20190119T220656Z-001/virtual reality check/Communication.html">
</map>
<!--horizontal menu bar with links to other pages-->
</body>
</html>

但是我想将圆圈更改为：http://jsfiddle.net/xbenjii/s55KZ/29/ （链接包含新圈子的代码及其工作示例）

我很努力，但没有任何反应。

我需要将其设置为0到10，而不是0到100。

我需要制作一个圆形的动画，例如链接上的示例。

Answer 1

下面是一个起点...

您必须简化这些示例，并尽可能多地删除，以真正了解幕后的情况。我希望这能使您更接近所需。

我将maxPercentage保持为100，打印的文本除以10

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var segments = {};
segments['0'] = {
    last: 0,
    height: 15,
    distanceToOuter: 30,
    broke: false,
    incValue: 0.5
};
var percentage = 0;
var lastPercentage = 0;
var maxPercentage = 100;

//simulate download
(function loop() {
    setTimeout(function () {
        //set segment start size
        lastPercentage = percentage;
        percentage += 10; 
        
        //push segment into object stack
        segments[percentage] = {
            last: lastPercentage,
            height: 15,
            distanceToOuter: 30,
            broke: false,
            incValue: 0.5
        };
        //if percentage is under 100, continue to loop
        if (percentage === 100) {
            segments[100].broke = true;
            segments[segments[100].last].broke = true;
        } else if (percentage === 0) {
            segments[0].broke = true;
        } else {
            segments[lastPercentage].broke = true;
        }
        if (percentage < maxPercentage) {
            loop();
            draw(percentage);
            requestAnimationFrame(increaseDistanceToOuter);
        }
    }, 100);
}());

function draw(percentage) {
    //clear canvas
    ctx.clearRect(0, 0, 300, 300);
    
    //draw white circle
    ctx.beginPath();
    ctx.lineWidth = 15;
    ctx.strokeStyle = 'white';
    ctx.arc(150, 150, 120, toRadians(0), toRadians(360));
    ctx.stroke();

    //draw text
    ctx.fillStyle = 'green';
    ctx.font = "26pt Arial";
    ctx.textAlign = "center";
    ctx.fillText(percentage/10, 150, 158);
    
    //draw segments
    for (var key in segments) {
        circleSegment(
            Math.floor(segments[key].last * 3.6),
            Math.ceil(key * 3.6),
            segments[key].height,
            segments[key].distanceToOuter
        );
    }
}

function increaseDistanceToOuter() {
    for (var key in segments) {
        if (!segments[key].broke) {
            segments[key].height += segments[key].incValue;
            segments[key].incValue = segments[key].incValue / 2;
            segments[key].distanceToOuter += 0.05;
        } else {
            if (segments[key].distanceToOuter < 120) {
                segments[key].distanceToOuter++;
            } else if (segments[key].distanceToOuter >= 120) {
                segments[key].height = 15;
                segments[key].distanceToOuter = 120;
            }
        }
    }
    draw(percentage);
    requestAnimationFrame(increaseDistanceToOuter);
}

function toRadians(deg) {
    return deg * Math.PI / 180;
}

function circleSegment(degreesFrom, degreesTo, thickness, distanceToOuter) {
    ctx.beginPath();
    ctx.lineWidth = thickness;
    ctx.strokeStyle = 'green';
    ctx.arc(150, 150, distanceToOuter, toRadians(degreesFrom), toRadians(degreesTo));
    ctx.stroke();
}

html, body {
    background-color: lightgrey;
}

<canvas id="canvas" width="300" height="300"></canvas>

如何更改基于画布的评分动画？

1 个答案: