Question

我正在尝试使用一些图像制作由图案制作的饼图。但我看不到任何我试图展示的图像。以下代码有什么问题？

<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>

Answer 1

你的怀疑是正确的。

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

}

画布图案饼图与阵列图像

1 个答案: