使用“畫布”將圖像添加到輪子

Question

我是畫布的新手，我嘗試創建一個輪子，這里是我的代碼：

drawWheel = () =>{
        const length = 4;
        const sliceDeg = 360/length;
        var deg = 270;

        var canvas = this.refs.canvas;
        if(canvas.getContext){
            const ctx = canvas.getContext('2d');
            for(let i = 0;i<length;i++){
                ctx.beginPath();
                ctx.moveTo(center, center);
                ctx.arc(center,center,radius, this.deg2rad(deg) ,this.deg2rad(deg + sliceDeg));
                ctx.lineTo(center,center);
                ctx.stroke();

                ctx.save();
                ctx.translate(center, center);
                ctx.rotate(this.deg2rad(deg+sliceDeg/2));
                ctx.textAlign = "right";
                ctx.fillStyle = "red";
                ctx.font = 'bold 5vw sans-serif';
                ctx.fillText(i+1, radius/1.5,radius/11);
                ctx.restore();
                deg += sliceDeg;  
            }
        }
    }

這是我的結果：

我如何為每個切片填充圖像並調整它們以適合

Answer 1

看一下globalCompositeOperation和下面的示例：

 var size = 400; // I use a simple size because i don't have any images. Your code should probably be a little smarter. var myImages = []; //List of images /* GENEREATE IMAGES START */ //I generate some images using canvas here, but you should probably use <IMG> elements and img.naturalWidth/img.naturalHeight ["red", "blue", "green", "yellow"].forEach((color) => { var canvas = document.createElement("canvas"); canvas.width = canvas.height = size / 2; var ctx = canvas.getContext("2d"); ctx.fillStyle = color; ctx.fillRect(0, 0, size / 2, size / 2); myImages.push(canvas); }); /* GENEREATE IMAGES STOP */ //Main canvas to draw upon var canvas = document.body.appendChild(document.createElement("canvas")); canvas.width = canvas.height = size; var ctx = canvas.getContext("2d"); //Draw base shape. //Color doesn't matter, since we'll draw on top of it later ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2); ctx.fill(); //Set canvas to reuse transparency of existing pixels when drawing. ctx.globalCompositeOperation = "source-atop"; //Loop through images and draw on canvas. for (let x = 0; x < 2; x++) { for (let y = 0; y < 2; y++) { ctx.drawImage(myImages[x * 2 + y], x * size / 2, y * size / 2); } } //Reset canvas draw mode. //Technically not necessary, but a good practice to leave things the way you found them. ctx.globalCompositeOperation = "source-over"; 

編輯1

或者，您可以使用裁剪來獲取適合的圖像部分：

編輯2

這是一個使用剪切和處理角度的示例：

 function drawImagesOnCircleSlices(p) { var canvas = document.createElement("canvas"); canvas.width = canvas.height = p.radius * 2; var ctx = canvas.getContext("2d"); var step = (Math.PI * 2) / p.images.length; var cos = Math.cos(step); var width = Math.ceil(Math.abs((Math.cos(0) * p.radius) - (cos * p.radius))); var sin = Math.sin(step); ctx.save(); ctx.translate(p.radius, p.radius); for (var i = 0; i < p.images.length; i++) { var image = p.images[i]; ctx.rotate(step); ctx.save(); ctx.beginPath(); //Base ctx.arc(0, 0, 0, 0, 0); //Top ctx.arc(0, 0, p.radius, 0, 0); //Bottom ctx.arc(0, 0, p.radius, 0, step); ctx.closePath(); ctx.stroke(); ctx.clip(); //document.body.appendChild(image) ctx.drawImage(image, Math.min(cos * p.radius, 0), Math.min(sin * p.radius, 0)); ctx.restore(); } ctx.restore(); return canvas; } //TEST //Asynchronous image loading with callback to draw function loadImages(callback) { var images = []; var imageSize = 200; var extra = 200; var loaded = 0; while (images.length < 7) { var canvas = document.createElement("canvas"); canvas.height = Math.floor(Math.random() * imageSize) + extra; canvas.width = Math.floor(Math.random() * imageSize) + extra; var ctx = canvas.getContext("2d"); for (var i = 0; i < 1000; i++) { ctx.fillStyle = "rgba(" + [Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), 0.5].join(",") + ")"; ctx.fillRect(Math.random() * imageSize, Math.random() * imageSize, Math.random() * imageSize, Math.random() * imageSize); } var img = document.createElement("img"); images.push(img); img.onload = function() { loaded++; if (loaded === images.length) { callback(images); } }; img.src = canvas.toDataURL(); } } //Begin loading loadImages(function(images) { document.body.appendChild(drawImagesOnCircleSlices({ images: images, radius: 200 })); });