HTMLキャンバス：折れ線グラフの下の領域を色分けする方法は？

-1

私は山のグラフを作成しようとしています（折れ線グラフとその下の領域が陰影付けされています）。しかし、何を試しても、陰影領域は全領域をカバーしていません。私のグラフはオープンパスなので、塗りつぶしの結果はグラフの線を通っている領域になります。以下はHTMLキャンバス：折れ線グラフの下の領域を色分けする方法は？

私は、問題を示すために、W3Schoolに置くサンプルコードです。

私はまた、同じ行にいくつかの他の質問を見ましたが、それに続いて同じ問題が発生しています。

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.beginPath(); 
 
ctx.moveTo(0,150); 
 
ctx.lineTo(100,70); 
 
ctx.lineTo(150,100); 
 
ctx.lineTo(200,140); 
 
ctx.lineTo(250,90); 
 
ctx.lineTo(300,110); 
 
ctx.fillStyle ="red"; 
 
ctx.fill(); 
 
ctx.stroke();

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas>

出典

2017-09-21 TypeScripter

キャンバスの一番下に1つのポイントがありません。 'ctx.fllStyle'の前に' ctx.lineTo（300,150）;で終了してください。 – PHPglue

よくある質問とは – PHPglue

@PHPglue、あなたの答えが悪く、上記のコメントがうまくいかないと言って申し訳ありません。どうして？あなたは要件を変更して答えたからです。私は5行を与え、下の領域を埋めるように頼んだ。なぜあなたの側から別の行を追加しますか？それはあなたが山のグラフを知らないことを私に伝えます。答えるだけで私の元の要件を変更する前に、明確化を求めることができました。 – TypeScripter

、その後、lineTo(lastX, canvasHeight); lineTo(firstX, canvasHeight);fill()を呼び出す前に。

このように、塗りつぶされた領域は常にすべての下の領域をカバーします。
あなたが代わりのキャンバスの下に、唯一最大Y値を記入したい場合は、あなたのポイントからこのMAXY（以下スニペットでコメント部分）をつかむことができます。

const width = canvas.width; 
 
const height = canvas.height; 
 
const ctx = canvas.getContext('2d'); 
 
ctx.fillStyle = 'red'; 
 

 
function plotPoints() { 
 
    const pts = generatePoints(32); 
 
    // first plot the stroke 
 
    pts.forEach((pt) => ctx.lineTo(pt.x, pt.y)); 
 
    ctx.stroke(); 
 
    // now define the bottom of the filled area 
 
    const maxY = height; //Math.max.apply(null, pts.map(pt=>pt.y)); 
 
    // draw the missing parts 
 
    ctx.lineTo(pts[pts.length - 1].x, maxY); // bottom-right 
 
    ctx.lineTo(pts[0].x, maxY); // bottom-left 
 
    ctx.fill(); // will close the path for us 
 
} 
 
plotPoints(); 
 

 
function generatePoints(nbOfPoints) { 
 
    const pts = []; 
 
    for (let i = 0; i <= nbOfPoints; i++) { 
 
    pts.push({ 
 
     x: i * (width/nbOfPoints), 
 
     y: Math.random() * height 
 
    }); 
 
    } 
 
    return pts; 
 
}

canvas { 
 
    border: 1px solid lightgray; 
 
}

<canvas id="canvas"></canvas>

を

出典

2017-09-21 06:55:32 Kaiido

優秀な私が探していたものです..ありがとう。 – TypeScripter

こんにちは、あなたはあなたの答えを少し変更してください。私は誤ってあなたに投票しました。答えが編集されない限り、私はそれを変更できません。ありがとう、申し訳ありません。 – TypeScripter

-1

それは次のようだ：あなたはちょうど最初stroke()にあなたのパスを持っている

//<![CDATA[ 
 
/* external.js */ 
 
var doc, bod, E; // for use on other loads 
 
addEventListener('load', function(){ 
 
doc = document, bod = doc.body; 
 
E = function(id){ 
 
    return doc.getElementById(id); 
 
} 
 
var graph = E('graph'), ctx = graph.getContext('2d'); 
 
ctx.beginPath(); ctx.moveTo(0,150); ctx.lineTo(100,70); 
 
ctx.lineTo(150,100); ctx.lineTo(200,140); ctx.lineTo(250,90); 
 
ctx.lineTo(300,110); ctx.lineTo(300,110); ctx.lineTo(300,150); 
 
ctx.fillStyle = 'red'; ctx.fill(); ctx.stroke(); 
 
}); 
 
//]]>

/* external.css */ 
 
html,body{ 
 
    padding:0; margin:0; 
 
} 
 
.main{ 
 
    width:940px; padding:20px; margin:0 auto; 
 
} 
 
#graph{ 
 
    width:300px; height:150px; 
 
}

<!DOCTYPE html> 
 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> 
 
    <head> 
 
    <meta http-equiv='content-type' content='text/html;charset=utf-8' /> 
 
    <meta name='viewport' content='width=device-width' /> 
 
    <title>Graph</title> 
 
    <link type='text/css' rel='stylesheet' href='css/external.css' /> 
 
    <script type='text/javascript' src='external.js'></script> 
 
    </head> 
 
    <body> 
 
    <div class='main'> 
 
     <canvas id='graph'></canvas> 
 
    </div> 
 
    </body> 
 
</html>

出典

2017-09-21 04:08:21 PHPglue

お手伝いいただきありがとうございますが、この解決策は私を助けません。あなたのシナリオは、あなたの開始点と終了点がグラフの最後にあるために機能しました。通常の場合、それはありません。グラフは（0,0）から常にオリジナルではなく、（width、height）で終了しません。たとえそれを持っていても、グラフ上では奇妙に見え、間違った価格が表示されます。 – TypeScripter

これは基本的な数学の理解が不足しているためです。あなたは、それらのx、yの点が自分のどこにあるのか把握できたはずです。 – PHPglue

Lol ...神はあなたを祝福します。私はあなたの偉大な成果をあげられません。人生のすべての成功をお祈りします。応答し、人々を助け続ける。 – TypeScripter

HTMLキャンバス：折れ線グラフの下の領域を色分けする方法は？

答えて

関連する問題