我通过 js 模拟了标签区域悬停，并为每个区域创建了 js 函数。因此，正如您所看到的，矩形区域( bool 什维克主义)被绘制成 incide，而保利区域(乌托邦社会主义)只有一个轮廓。
var hdc;
// shorthand func
function byId(e){return document.getElementById(e);}
// takes a string that contains coords eg - "227,307,261,309, 339,354, 328,371, 240,331"
// draws a line from each co-ord pair to the next - assumes starting point needs to be repeated as ending point.
function drawPoly(coOrdStr)
{
var mCoords = coOrdStr.split(',');
var i, n;
n = mCoords.length;
hdc.beginPath();
hdc.moveTo(mCoords[0], mCoords[1]);
for (i=2; i<n; i+=2)
{
hdc.lineTo(mCoords[i], mCoords[i+1]);
}
hdc.lineTo(mCoords[0], mCoords[1]);
hdc.stroke();
}
function drawRect(coOrdStr)
{
var mCoords = coOrdStr.split(',');
var top, left, bot, right;
left = mCoords[0];
top = mCoords[1];
right = mCoords[2];
bot = mCoords[3];
hdc.fillRect(left,top,right-left,bot-top);
}
function myHover(element)
{
var hoveredElement = element;
var coordStr = element.getAttribute('coords');
var areaType = element.getAttribute('shape');
switch (areaType)
{
case 'polygon':
case 'poly':
drawPoly(coordStr);
break;
case 'rect':
drawRect(coordStr);
break;
}
}
function myLeave()
{
var canvas = byId('myCanvas');
hdc.clearRect(0, 0, canvas.width, canvas.height);
}
function myInit()
{
// get the target image
var img = byId('main');
var x,y, w,h;
// get it's position and width+height
x = img.offsetLeft;
y = img.offsetTop;
w = img.clientWidth;
h = img.clientHeight;
//alert(x + " " + y + " " + w + " " + h);
// move the canvas, so it's contained by the same parent as the image
var imgParent = img.parentNode;
var can = byId('myCanvas');
imgParent.appendChild(can);
// place the canvas in front of the image
can.style.zIndex = 1;
// position it over the image
can.style.left = x+'px';
can.style.top = y+'px';
// make same size as the image
can.setAttribute('width', w+'px');
can.setAttribute('height', h+'px');
// get it's context
hdc = can.getContext('2d');
// set the 'default' values for the colour/width of fill/stroke operations
hdc.fillStyle = "rgba(230,236,247,0.5)";
hdc.strokeStyle = "rgba(230,236,247,0.5)";
hdc.lineWidth = 2;
}.menu {
position: fixed; /* Фиксированное положение */
right: 50px; /* Расстояние от правого края окна браузера */
top: 90%; /* Расстояние сверху */
}
#back_1 {
background-color: #cecece;
height: 720px;
margin: 0px auto;
text-align: center;
}
#main {
width: 700px;
height: 700px;
line-height: 0;
border: none;
}
#bolshevism {
height: 300px;
background-color: #b30106;
}
.text_1 {
width: 1200px;
padding-top: 70px;
margin: 0px auto;
text-align: left;
}
.text_2 {
width: 1200px;
padding-top: 70px;
margin: 0px auto;
text-align: right;
}
#utopian_socialism {
background-color: #eb3913;height: 330px;
}
#myCanvas {
position: absolute;
pointer-events:none;
}<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Political Spectrum</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="js/jquery.localScroll.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="myInit()">
<canvas id='myCanvas'></canvas>
<div id="back_1">
<map name="map"><a id="picture"></a>
<img src="http://i.imgur.com/Vk1e2hW.png" id="main" usemap="#map"ismap>
<div>
<area href="#bolshevism_1" onmouseover='myHover(this);' onmouseout='myLeave();' shape="rect" coords="59,55,105,130" alt="Bolshevism">
<area href="#utopian_socialism_1" onmouseover='myHover(this);' onmouseout='myLeave();' shape="poly" coords="59,466,172,466,172,590,139,590,139,599,59,599" alt="Social Democracy">
<div id="bolshevism" class="authoritarian">
<div class="text_1">
<a id="bolshevism_1"><p class="head">BOLSHEVISM</p></a>
<img src="images/line.png"class="line"/>
<p class="descriprion">Bolshevism is the term used to describe the beliefs and practices of the Bolsheviks, the members of a political movement in Russia during the early 20th century. Bolsheviks were a faction of the Marxist Russian Social Democratic Labour Party (RSDLP) which split apart from the Menshevik faction at the Second Party Congress in 1903. The RSDLP was a revolutionary socialist political party formed in 1898 in Minsk in Belarus to unite the various revolutionary organisations of the Russian Empire into one party.</p>
<p class="link"><i class="fa fa-wikipedia-w" aria-hidden="true"></i><span><a href="https://en.wikipedia.org/wiki/Bolsheviks" target="_blank">Bolshevism</a></span></p>
</div>
</div>
<div id="utopian_socialism" class="authoritarian">
<div class="text_1">
<a id="utopian_socialism_1"><p class="head">UTOPIAN SOCIALISM</p></a>
<img src="images/line.png"class="line"/>
<p class="descriprion">Utopian socialism is a label used to define the first currents of modern socialist thought as exemplified by the work of Henri de Saint-Simon, Charles Fourier, Étienne Cabet, and Robert Owen. Utopian socialism is often described as the presentation of visions and outlines for imaginary or futuristic ideal societies, with positive ideals being the main reason for moving society in such a direction. Later socialists and critics of utopian socialism viewed "utopian socialism" as not being grounded in actual material conditions of existing society, and in some cases, as reactionary. These visions of ideal societies competed with Marxist-inspired revolutionary social democratic movements.<span class="link"><a href="https://en.wikipedia.org/wiki/Utopian_socialism" target="_blank">[wiki]</a></span></p>
<p class="link"><i class="fa fa-wikipedia-w" aria-hidden="true"></i><span><a href="https://en.wikipedia.org/wiki/Utopian_socialism" target="_blank">Utopian Socialism</a></span></p>
</div>
</div>
</body>
</html>最佳答案
之后
hdc.stroke();
您应该添加以下行:
hdc.fill();
因此您的多边形将被颜色填充。
关于javascript - Canvas Poly 区域未绘制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44252700/