캔버스로 만드는 원형 펀칭 레이어
HTML
<canvas id="image" style="height: 300px; width: 300px;" height="300" width="300"></canvas>
자바스크립트
var image = new Image()
image.onload = function() {
canvas = document.getElementById("image");
context = canvas.getContext("2d");
context.fillStyle = "rgba(0, 0, 0, 0.5)";
context.fillRect(0, 0, 300, 300);
context.fillStyle = "rgb(255, 255, 255)";
context.globalCompositeOperation = "destination-out";
context.arc(150, 150, 150, 0, Math.PI * 2);
context.fill();
context.globalCompositeOperation = "destination-over";
context.drawImage(image, 0, 0, 300, 300)
}
image.src = "https://frenchmoments.eu/wp-content/gallery/nancy-place-stanislas/copyright-french-moments-place-stanislas-nancy-8.jpg"
Reference
이 문제에 관하여(캔버스로 만드는 원형 펀칭 레이어), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/IzumiSy/items/0e5c3ae7eed9437fc6b9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)