个人中心
gpt4 book ai didi

javascript - Canvas Poly 区域未绘制

转载 作者：行者123 更新时间：2023-11-28 03:40:12 27 4
gpt4 key购买 nike

我通过 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/

27 4 0
文章推荐： html - 通过 CSS 更改图像的颜色
文章推荐： html - :after 中的 Wordpress 背景图片
文章推荐： javascript - 如何在 IE8 中禁用 ondblclick？
文章推荐： javascript - 验证输入而不是在填写完成后关闭 div
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com