使用drawImage（）畫布裁剪圖像的倍數？

我有這個代碼，併成功地挖空左角，但我需要裁剪此圖像的所有4個角落，可以用同一個對象來完成嗎？使用drawImage（）畫布裁剪圖像的倍數？

我有這段代碼，併成功地挖空了左角，但我需要裁剪此圖像的所有4個角，它可以用同一個對象來完成嗎？

//Global variables 
    var myImage = new Image(); // Create a new blank image. 

    // Load the image and display it. 
    function displayImage() { 

    // Get the canvas element. 
    canvas = document.getElementById("myCanvas"); 

    // Make sure you got it. 
    if (canvas.getContext) { 

     // Specify 2d canvas type. 
     ctx = canvas.getContext("2d"); 

     // When the image is loaded, draw it. 
     myImage.onload = function() { 

     // Load the image into the context. 
     ctx.drawImage(myImage, 0, 0); 

     // Get and modify the image data. 
     changeImage(); 
     } 

     // Define the source of the image. 
     myImage.src = "ice.jpg"; 
    } 
    } 

    function changeImage() { 

    ctx.strokeStyle = "white"; 
    ctx.lineWidth = "70"; 
    ctx.beginPath(); 
    ctx.arc(0,0,10,0*Math.PI,0.5*Math.PI); 
    ctx.closePath(); 
    ctx.stroke(); 
    } 
    </script> 
    </head> 

    <body onload="displayImage()"> 

    <canvas id="myCanvas" width="200" height="200"> 
    </canvas> 

    </body> 

    </html>

來源

2015-12-14 tali

你必須手動繪製四季度圈：什麼@AndreaBogazzi說

//Global variables 
 
    var myImage = new Image(); // Create a new blank image. 
 
    
 
    // Load the image and display it. 
 
    function displayImage() { 
 

 
    // Get the canvas element. 
 
    canvas = document.getElementById("myCanvas"); 
 

 
    // Make sure you got it. 
 
    if (canvas.getContext) { 
 

 
     // Specify 2d canvas type. 
 
     ctx = canvas.getContext("2d"); 
 

 
     // When the image is loaded, draw it. 
 
     myImage.onload = function() { 
 
     canvas.width = myImage.width; 
 
     canvas.height = myImage.height; 
 
     // Load the image into the context. 
 
     ctx.drawImage(myImage, 0, 0); 
 

 
     // Get and modify the image data. 
 
     changeImage(myImage.width, myImage.height); 
 
     } 
 

 
     // Define the source of the image. 
 
     myImage.src = "http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"; 
 
    } 
 
    } 
 

 
    function changeImage(w,h) { 
 
    var r = 70; 
 
    ctx.fillStyle = "white"; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(0,0); 
 
    ctx.arc(0,0,r,0*Math.PI,0.5*Math.PI); 
 
    ctx.moveTo(0,r); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
    ctx.beginPath(); 
 
    ctx.arc(w,0,r, -0.5*Math.PI,-1*Math.PI); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(0,h); 
 
    ctx.arc(0,h,r, -0.5*Math.PI,0*Math.PI); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(w,h); 
 
    ctx.arc(w,h,r, -1*Math.PI,-0.5*Math.PI); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
    } 
 

 
displayImage();

<canvas id="myCanvas" width="200" height="200"> 
 
    </canvas>

來源

2015-12-14 16:16:39 AndreaBogazzi

哦，我的上帝，你是最好的!!!! – tali

那種，而是那種ñ ot ...

是的，你可以使用單一路徑繪製所有4個角切口。

這是通過繪製一個切口圓，然後拿起「刷子」並將其移動到下一個切口的中心來完成的。

你必須拿起畫筆，否則你會得到一個連接每個切口圓的中心點的線。

開始的單一路徑：ctx.beginPath()
畫圓弧：ctx.arc(0,0,cutRadius,0,Math.PI*2)
拿起「畫筆」，並將其移動到下一個圓弧的圓心：ctx.moveTo(w,0)
畫圓弧：ctx.arc(w,0,cutRadius,0,Math.PI*2)
拿起「刷子」並將其移動到下一個弧線的中心：ctx.moveTo(w,h)
繪製弧線：ctx.arc(w,h,cutRadius,0,Math.PI*2)
拿起「畫筆」，並將其移動到下一個圓弧的圓心：ctx.moveTo(0,h)
畫圓弧：ctx.arc(0,h,cutRadius,0,Math.PI*2)
填充所有4個缺口圈：ctx.fill()

注意：由於「刷「從[0,0]開始，步驟＃1後不需要moveTo(0,0)。

示例代碼和演示：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var cutRadius=10; 
 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/reef.jpg"; 
 
function start(){ 
 
    cw=canvas.width=img.width; 
 
    ch=canvas.height=img.height 
 
    ctx.drawImage(img,0,0); 
 
    changeImage(); 
 
} 
 

 
function changeImage() { 
 
    ctx.fillStyle = "white"; 
 
    ctx.beginPath(); 
 
    ctx.arc(0,0,cutRadius,0,Math.PI*2); 
 
    ctx.moveTo(cw,0); 
 
    ctx.arc(cw,0,cutRadius,0,Math.PI*2); 
 
    ctx.moveTo(cw,ch); 
 
    ctx.arc(cw,ch,cutRadius,0,Math.PI*2); 
 
    ctx.moveTo(0,ch); 
 
    ctx.arc(0,ch,cutRadius,0,Math.PI*2); 
 
    ctx.fill(); 
 
}

<canvas id="canvas" width=300 height=300></canvas>

來源

2015-12-14 16:38:42 markE

使用drawImage（）畫布裁剪圖像的倍數？

回答

相關問題