画布填充区域并在图表中圈出

Question

I am trying to draw a line chart with different colors for different parts of the charts.

I am having trouble figuring out how to draw individual fillStyle and strokeStyle

Attached code with comments

 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> 

Any help is much appreciated.

Answer 1

You need to use the ctx.beginPath(); when you are drawing to a canvas...

Here is your snippet with a different approach:

 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>