canvas 그림 그리 기 및 다운로드

canvas 중국어 api
캔버스 그림 그리 기
캔버스 만 들 기
그림 컨 텍스트 context 컨 텍스트: 공구 꾸러미, 모든 그림 그리 기 작업 api 의 입구 입 니 다.
1. canvas 자신 은 아무것도 그 릴 수 없습니다. canvas 그림 은 js 동작 2. context 대상 일 때 js 동작 canvas 의 인터페이스 3. getContext('2d') 를 사용 하여 2D 그림 의 컨 텍스트 를 가 져 옵 니 다.

<canvas id="canvas" width="1200" height="600">canvas>
<script>
	(() => {
		let myCanvas = document.querySelector('#canvas');
		// 2d      3d:webgl
		let ctx = myCanvas.getContext('2d');
		let ctx = myCanvas.getContext('webgl');
	})()
script>

그림 기본 그리 기

ctx.drawImage(img, x, y);

  ：
	img：     dom  
	x、y：

그림 너비 높이 재 설정 그리 기

ctx.drawImage(img, x, y, width, height);
  ：
	width：       
	height：

그림 재단 부분 그리 기

ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
  ：
	sx、sy：          
	swidth：       
	sheight：

케이스


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvastitle>
head>
<body>
    <canvas id="canvas" width="1200" height="1000">canvas>
    <script>
        (() => {
            let myCanvas = document.querySelector('#canvas');
            let ctx = myCanvas.getContext('2d');

            let img = new Image();
            img.src = 'images/katsuki.jpg'
            img.onload = function() {
            	//     
                ctx.drawImage(img, 20, 20);
            }

            let img2 = new Image();
            img2.src = 'images/katsuki.jpg'
            img2.onload = function() {
				//       
                ctx.drawImage(img, 420, 20, 400, 200);
            }

            let img3 = new Image();
            img3.src = 'images/katsuki.jpg'
            img3.onload = function() {
            	//         
                ctx.drawImage(img, 480, 97, 180, 200, 20, 360, 180, 200);
            }
        })()
    script>
body>
html>

canvas 그림 저장 (base 64)

toDataURL(mimeType, quality)
  ：
	mimeType：
		          mimeType  。    image/png
		
	quality：
		         ，   0 1。
		       ，   mimeType   image/jpeg  image/webp，  mimeType   。
		       0.92。

          ，file

케이스


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvastitle>
head>
<body>
    <canvas id="canvas" width="1200" height="1000">canvas>
    <br />
    <button id='btnSave'>    button>
    <script>
        (() => {
            let myCanvas = document.querySelector('#canvas');
            let ctx = myCanvas.getContext('2d');
            
            let img3 = new Image();
            img3.src = 'images/katsuki.jpg'
            img3.onload = function() {
                ctx.drawImage(img, 480, 97, 180, 200, 20, 360, 180, 200);
            }

            let btnSave = document.querySelector('#btnSave')
            btnSave.onclick = function() {
                let imgData = myCanvas.toDataURL('image/png');
                console.log(imgData);

				//           
                let newImage = new Image();
                newImage.src = imgData;
                document.body.appendChild(newImage);
            }
        })()
    script>
body>
html>

사진 다운로드
위 그림 저장 버튼 수정
탭 방식

btnSave.onclick = function() {
    let imgData = myCanvas.toDataURL('image/png');
    console.log(imgData);

    let link = document.createElement('a');
    link.href = imgData;
    link.style.display = 'none';
    link.download = 'katsuki.png'; //     
    document.body.appendChild(link);

    link.click();
    URL.revokeObjectURL(link.href); //   URL  
    document.body.removeChild(link);
}

사용자 정의 이벤트 방식
브 라 우 저 는 이전 방식 으로 사용 할 수 있 는 것 을 지원 하지 않 습 니 다.
처리 절차: 1. 이벤트 생 성 eventObject = document.createElement(eventType)매개 변수
이벤트 인터페이스
초기 화 방법
HTMLEvents
HTMLEvent
iniEvent()
MouseEvents
MouseEvent
iniMouseEvent()
UIEvents
UIEvent
iniUIEvent()
2. 이벤트 초기 화

iniEvent()

iniMouseEvent()

iniUIEvent()

iniMouseEvent() ：
매개 변수 유형
설명 하 다.
type string 형식
'click' 과 같은 이벤트 형식 을 실행 합 니 다.
bubbles 부 울 타 입
이벤트 에 거품 이 생 겨 야 하 는 지 여 부 를 표시 합 니 다. 마우스 이벤트 에 대해 시 뮬 레이 션 을 하면 이 값 은 true 로 설정 되 어야 합 니 다.
cancelable bool 형식
이 이벤트 가 취 소 될 수 있 는 지 여 부 를 표시 합 니 다. 마우스 이벤트 에 대한 시 뮬 레이 션 은 true 로 설정 해 야 합 니 다.
뷰 추상 보기
이벤트 가 부여 한 보기 입 니 다. 이 값 은 거의 document. defaultView 입 니 다.
detail int 형식
추 가 된 이벤트 정보
screenX int 형식
이벤트 거리 화면 왼쪽 X 좌표
screenY int 형식
이벤트 거리 화면 위의 y 좌표
clientX int 형식
이벤트 거리 시각 영역 왼쪽 X 좌표
clientY int 형식
이벤트 거리 시각 영역 위의 y 좌표
ctrlKey 부 울 타 입
ctrol 키 가 눌 렸 는 지, 기본 값 은 false 입 니 다.
altKey 부 울 타 입
alt 키 가 눌 렸 는 지, 기본 값 은 false 입 니 다.
shiftKey 부 울 타 입
shif 키 가 눌 렸 는 지, 기본 값 은 false 입 니 다.
metaKey 부 울 타 입
meta key 가 눌 렸 는 지, 기본 값 은 false 입 니 다.
button int 형식
눌 린 마우스 단 추 를 표시 합 니 다. 기본 값 은 0 입 니 다.
relatedTarget (object)
이벤트 의 관련 대상 입 니 다. mouseover 와 mouseout 을 모 의 할 때 만 사용 합 니 다.
3. 촉발 이벤트 dom.dispatchEvent(eventObject)

btnSave.onclick = function() {
    let imgData = myCanvas.toDataURL('image/png');
    console.log(imgData);

    let link = document.createElement('a');
    link.href = imgData;
    link.style.display = 'none';
    link.download = 'katsuki.png'; //     

    let event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    link.dispatchEvent(event);
}

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

canvas 그림 그리 기 및 다운로드

좋은 웹페이지 즐겨찾기