画布图案饼图与数组图像

Canvas patterned pie chart with array image

本文关键字：数组图像布图案更新时间：2023-09-26

我正在尝试使用一些图像的模式制作饼状图。但是我无法看到我想要展示的任何图像。以下代码有什么问题?

<html> 
  <body> 
    <canvas width="250" height="250" id="canvas"></canvas> 
     <script>
     var imgArray = new Array();
       imgArray[0] = new Image();
       imgArray[0].src = 'p2.jpg';
       imgArray[1] = new Image();
       imgArray[1].src = 'p3.jpg';
       imgArray[2] = new Image();
       imgArray[2].src = 'p4.jpg';
       imgArray[3] = new Image();
       imgArray[3].src = 'p5.jpg';
       imgArray[4] = new Image();
       imgArray[4].src = 'p6.jpg';  
    //initialize data set 
     var data = [ 100, 68, 20, 30, 100 ]; 
     var canvas = document.getElementById('canvas'); 
     var c = canvas.getContext('2d'); 
     //draw background 
     c.fillStyle = "white"; 
     c.fillRect(0,0,500,500); 
     //a list of colors 
     //calculate total of all data 
     var total = 0; 
     for(var i=0; i<data.length; i++) { 
         total += data[i]; 
      }
      var prevAngle = 0; 
     for(var i=0; i<data.length; i++) { 
     //fraction that this pieslice represents 
     var fraction = data[i]/total;

在这一步中，我动态地尝试将图像放入饼状图，但我认为'src'的使用是错误的。

      //calc starting angle 
          var angle = prevAngle + fraction*Math.PI*2; 
          var pat=c.createPattern(imgArray[i].src,"repeat");
     //draw the pie slice 
     //create a path 
      c.beginPath(); 
      c.moveTo(250,250); 
      c.arc(250,250, 100, prevAngle, angle, false); 
      c.lineTo(250,250); 
      c.closePath();
     //fill it
      c.fillStyle = pat; 
      c.fill(); 
     //stroke it 
     c.strokeStyle = "black"; 
     c.stroke(); 
    //update for next time through the loop 
     prevAngle = angle; </script> </body> </html>

你的怀疑是对的。

createPattern接受一个图像对象——而不是URL。

var pat;
var img=new Image();
img.onload=function(){
    pat=c.createPattern(img,"repeat");
    // now you can create a path and fill it with `pat`
}
img.src="http://whatever.com/whatever.png";

[添加图像加载程序代码以响应附加问题]

// image loader
var imageURLs=[];  // put the paths to your images here
var imagesOK=0;
var imgArray=[];
imageURLs.push("p2.jpg");
imageURLs.push("p3.jpg");
imageURLs.push("p4.jpg");
imageURLs.push("p5.jpg");
imageURLs.push("p6.jpg");
loadAllImages(start);
function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgArray.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}
function start(){
    // the imgArray[] array now holds fully loaded images
    // the imgArray[] are in the same order as imageURLs[]
    // imgArray[0] is p2.jpg
    // imgArray[1] is p3.jpg
    // imgArray[2] is p4.jpg
    // imgArray[3] is p5.jpg
    // imgArray[4] is p6.jpg
    // create your patterns now
}