Question

我有一个用chart.js制作的图表...我想为我的画布制作一个背景图片响应...我做了一些关于...你可以看到this链接......

我不能让这个背景图像响应（或适合画布宽度和高度）......任何人都可以帮助我吗？

var img = new Image();
img.src = 'http://www.360kreatif.com/ersen/efektler/images/light.png';
var canvas = document.getElementById("myChart");
var context = canvas.getContext('2d');
var fillPattern = context.createPattern(img, 'repeat');
context.fillStyle = fillPattern;
context.fillRect(0, 0, 100, 100);

var myChart = new Chart(canvas, {
    type: 'pie',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [1, 1, 1, 1, 1, 1],
            displacements: [2, 2, 2, 2, 2, 2],
            backgroundColor: fillPattern,
            borderColor: [
                'rgba(255,99,132,0)',
                'rgba(54, 162, 235, 0)',
                'rgba(255, 206, 86, 0)',
                'rgba(75, 192, 192, 0)',
                'rgba(153, 102, 255, 0)',
                'rgba(255, 159, 64, 0)'
            ],
            borderWidth: 1,
            cutoutPercentage:5
            }]
        },
        options: {
            responsive: true,
                legend: {
                    display: false,
                },
                tooltips: {
                    enabled: false,
                },
                title: {
                    display: false,
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                }
        }
    });

Answer 1

Canvas标签是基于像素的，所以根据定义，它不是响应式 - 如果你需要一个响应式图像，你应该尝试使用SVG标签，它使用矢量图形（响应）。

如何使html5画布背景图案响应

1 个答案: