обрезать изображение с помощью drawImage() холста?

У меня есть этот код и успешно обрезаны левый угол, но мне нужно обрезать все 4 угла этого изображения, может ли это быть сделано с одним и тем же объектом?обрезать изображение с помощью drawImage() холста?

У меня есть этот код и успешно обрезаны левый угол, но мне нужно обрезать все 4 угла этого изображения, можно ли сделать это с одним и тем же объектом?

the croped image

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

Вы должны вручную нарисовать четыре четверти круга:

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

Вид, что говорит @AndreaBogazzi, но вид N ot ...

Да, вы можете нарисовать все 4 угловых вырезывания, используя один путь.

Это делается путем начертания круга выреза, а затем подбирает «кисть» и перемещает его в центр следующего выреза.

Вы должны забрать кисть, иначе вы получите линию, которая соединяет центральные точки каждого круга выреза.

Begin один путь: 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() холста?

ответ

Смежные вопросы