расслоения плотного я следующий простой код работает штраф на Node.js:Изменение фоне ChartJS на узел
var express = require('express');
var Canvas = require('canvas');
var Chart = require('nchart');
var app = express();
app.get('/', function (req, res) {
var canvas = new Canvas(400, 200);
var ctx = canvas.getContext('2d');
var data = {
labels: ["January", "February", "March", "April"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(0,0,0,0)", //transparent
strokeColor: "#f15a42",
pointColor: "#f15a42",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [5, 9, 8, 1]
}
]
};
var myChart = new Chart(ctx).Line(data, {});
res.setHeader('Content-Type', 'image/png');
canvas.pngStream().pipe(res);
});
var server = app.listen(3000, function() {
var host = server.address().address;
var port = server.address().port;
console.log('app listening at http://%s:%s', host, port);
});
Он производит следующий PNG изображение:
Он имеет прозрачный фон. Я могу изменить фон всего холста (хочу, чтобы он был сплошным белым), пока я не добавлю диаграмму к нему. Это должна быть функция ChartJS, но я ничего не мог найти.
Я мог бы это сделать, если бы у меня был HTML-холст, не знаю, как продолжить работу с узлом.
Спасибо, это работает, но я не уверен, почему: не могли бы вы немного объяснить? – koichirose
Несомненно. globalCompositeOperation - свойство canvas context, которое определяет, как новые фигуры будут включены в растровое изображение canvas. Значение по умолчанию (source-over) просто рисует новую фигуру поверх всех существующих фигур. destination-over - это противоположность тому, что он рисует новую форму под всеми существующими формами - это то, что мы делаем, - мы заполняем холст нашим цветом заливки в соответствии с существующей диаграммой. Подробнее см. Https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation. Ура! – potatopeelings
получил, спасибо! – koichirose