簡體   English   中英

畫布填充區域並在圖表中圈出

[英]Canvas fill area and circle in a chart

我正在嘗試為圖表的不同部分繪制具有不同顏色的折線圖。

我在弄清楚如何繪制單個fillStylestrokeStyle時遇到麻煩

附帶注釋的代碼

 const canvas = document.getElementById('test'); const ctx = canvas.getContext('2d'); const width = canvas.width = 1000; const height = canvas.height = 500; ctx.fillStyle = 'blue'; function plotPoints() { const pts = generatePoints(25); pts.forEach((pt, index, pointArray) => { drawCurvedLine(ctx, pt, index, pointArray) }); ctx.stroke(); const maxY = Math.max.apply(null, pts.map(pt => pt.y)); ctx.lineTo(pts[pts.length - 1].x, maxY); ctx.lineTo(pts[0].x, maxY); // Area Color ctx.fillStyle = 'rgba(255, 148, 136, .6)'; ctx.fill(); } 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; } function drawCurvedLine(ctx, point, index, pointArray) { if (typeof pointArray[index + 1] !== 'undefined') { var x_mid = (point.x + pointArray[index + 1].x) / 2; var y_mid = (point.y + pointArray[index + 1].y) / 2; var cp_x1 = (x_mid + point.x) / 2; var cp_x2 = (x_mid + pointArray[index + 1].x) / 2; // Point fill color crimson // Point stroke style blue for example ctx.fillStyle = 'crimson'; ctx.strokeStyle = 'blue'; ctx.arc(point.x, point.y, 10, 2 * Math.PI, false); // ctx.stroke(); // ctx.fill(); ctx.quadraticCurveTo(cp_x1, point.y, x_mid, y_mid); ctx.quadraticCurveTo(cp_x2, pointArray[index + 1].y, pointArray[index + 1].x, pointArray[index + 1].y); // Line stroke style salmon ctx.strokeStyle = 'salmon'; ctx.lineWidth = 5; } } 
 <canvas id="test"></canvas> 

任何幫助深表感謝。

您需要使用ctx.beginPath(); 當您在畫布上繪畫時...

這是您使用不同方法的代碼段:

 const canvas = document.getElementById('test'); const ctx = canvas.getContext('2d'); const width = canvas.width = 600; const height = canvas.height = 250; plotPoints(); function plotPoints() { const pts = generatePoints(50); ctx.strokeStyle = 'salmon'; ctx.fillStyle = 'rgba(255, 148, 136, .6)'; ctx.lineWidth = 5; ctx.beginPath(); pts.forEach((pt, index, pointArray) => { drawCurvedLine(pt, pointArray[index + 1]) }); ctx.fill(); ctx.stroke(); ctx.strokeStyle = 'black'; ctx.lineWidth = 2; for (i = 5; i < pts.length-5; i++) { ctx.beginPath(); ctx.fillStyle = 'rgba(0,'+ pts[i].y +','+ pts[i].x/2 +')'; ctx.arc(pts[i].x, pts[i].y, 5, 2 * Math.PI, false) ctx.stroke(); ctx.fill(); } } function generatePoints(nbOfPoints) { const pts = [{x:0, y: height}]; for (let i = 0; i <= nbOfPoints; i++) { pts.push({x: i * (width / nbOfPoints), y: Math.sin(i/2.6) * height/3 + 100}); } pts.push({x:width, y: height}); return pts; } function drawCurvedLine(point, next) { if (typeof next !== 'undefined') { var x_mid = (point.x + next.x) / 2; var y_mid = (point.y + next.y) / 2; var cp_x1 = (x_mid + point.x) / 2; var cp_x2 = (x_mid + next.x) / 2; ctx.quadraticCurveTo(cp_x1, point.y, x_mid, y_mid); ctx.quadraticCurveTo(cp_x2, next.y, next.x, next.y); } } 
 <canvas id="test"></canvas> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM