캔버스 호에 이미지를 삽입하는 방법은 무엇입니까?

debugcn 에 게시 Dev

카나리 나 토르

여기에 내 스크립트가 있습니다. 검은 색 부분 만 대체하기 위해 아크 캔버스에 이미지를 삽입하려고하지만 해결책은 없습니다 ./ 스택에 처음 게시 한 것입니다. 도와 주시기를 바랍니다. 스크립트를 보는 바이올린 : http://jsfiddle.net/a1u6jmfj/

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="250"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 50;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 100;

      // line color
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>

Volune

합성 을 사용할 수 있습니다.

var image = new Image();
image.src = /*image url*/;
image.onload = function() {
    context.save();
    context.globalCompositeOperation = 'source-in';
    context.drawImage(image, 0, 0);
    context.restore();
};

예

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

캔버스 호에 이미지를 삽입하는 방법은 무엇입니까?

캔버스 호에 이미지를 삽입하는 방법은 무엇입니까?

현재 웹 페이지 상단에 캔버스 요소를 삽입하는 방법은 무엇입니까?

fabricjs 캔버스 이미지를 다른 배경 이미지에 저장하는 방법은 무엇입니까?

하나의 캔버스를 이미지에 복사하는 방법은 무엇입니까?

캔버스에 여러 이미지를 표시하는 방법은 무엇입니까?

Tkinter 캔버스 이미지를 함수에 바인딩하는 방법은 무엇입니까?

캔버스에서 이미지를 드래그하는 방법은 무엇입니까?

KineticJS : IE9에서 캔버스를 이미지로 저장하는 방법은 무엇입니까?

이미지 캔버스를 폴더에 저장하는 방법은 무엇입니까?

캔버스에서 이미지 크기를 조정하는 방법은 무엇입니까?

Android Canvas에서 전체 캔버스를 jpeg 이미지로 저장하는 방법은 무엇입니까?

캔버스에 이미지를 그릴 때마다 참조를 얻는 방법은 무엇입니까?

DearPyGui 캔버스에 PIL 이미지를 그리는 방법은 무엇입니까?

캔버스에서 이미지 크기를 얻는 방법은 무엇입니까?

캔버스의 다른 모든 콘텐츠 뒤에 이미지를 그리는 방법은 무엇입니까?

sqlite3 데이터베이스에 이미지를 삽입하는 방법은 무엇입니까?

이미지를 데이터베이스 (php)에 직접 삽입하는 방법은 무엇입니까?

캔버스 상단의 이미지에 대해 마우스 커서 주위에 호버 효과를 얻는 방법은 무엇입니까?

Android에서 캔버스를 사용하여 다른 이미지 안에 이미지를 추가하는 방법은 무엇입니까?

Anki 노트에 라텍스 형식으로 이미지를 삽입하는 방법은 무엇입니까?

캔버스를 사용하여 한 이미지를 다른 이미지에 붙여 넣는 방법은 무엇입니까?

캔들 스틱 HighChart 툴팁에 더 많은 데이터를 삽입하는 방법은 무엇입니까?

kineticjs에서 캔버스 객체를 얻는 방법은 무엇입니까?

캔버스없이 이미지 컨트롤에 타원을 그리는 방법은 무엇입니까?

캔버스 콘텐츠의 크기를 조정하고 이미지를 서버에 업로드하는 방법은 무엇입니까?

캔버스에 이미지를 추가하고 그 위에 회전 된 텍스트를 배치하는 방법은 무엇입니까?

이미지 열이있는 데이터베이스에서 이미지없이 데이터를 삽입하는 방법은 무엇입니까?

텍스트를 채운 후 캔버스에 높이를 설정하는 방법은 무엇입니까?

화살표 키를 눌러 캔버스 HTML5에서 이미지를 이동하는 방법은 무엇입니까?

캔버스에 간격이있는 이미지를 가로로 추가하는 올바른 방법은 무엇입니까?