위챗 미니 프로그램 API 도면

wx.createContext()

---

그리기 컨텍스트 컨텍스트 객체를 생성하고 반환합니다.

context

context는 메서드 호출을 기록하는 컨테이너일 뿐이며 그리기 동작을 기록하는 작업 배열을 생성하는 데 사용됩니다. 맥락은 <canvas/>不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个<canvas/>을 따릅니다.

// 假设页面上有3个画布
var canvas1Id = 3001;
var canvas2Id = 3002;
var canvas3Id = 3003;

var context = wx.createContext();

[canvas1Id, canvas2Id, canvas3Id].forEach(function (id) {
  context.clearActions();
  // 在context上调用方法
  wx.drawCanvas({
    canvasId: id,
    actions: context.getActions();
  });
});

컨텍스트 객체의 메서드 목록:

ㅋㅋㅋ setFillStylesetStrokeStylesetShadowsetFontSizesetLineCapsetLineJoinsetLineWidthsetMiterLimit

메서드 세부 정보:

scale

scale() 메서드를 호출한 후 이후에 생성되는 경로의 가로 및 세로 좌표의 크기가 조정됩니다. scale이 여러 번 호출되면 배수가 곱해집니다.

//scale.js
<!--scale.wxml --> <canvas canvas-id="1" />

Page({
  onReady:function(e){
    var context = wx.createContext();
    context.rect(5,5,25,15)
    context.stroke();
    context.scale(2,2); //再放大2倍
    context.rect(5,5,25,15);
    context.stroke();
    context.scale(2,2); //再放大2倍
    context.rect(5,5,25,15)
    context.stroke();
    wx.drawCanvas({
      canvasId:1,
      actions:context.getActions()
    });
  }
})

rotate

은 원점을 중심으로 하며 번역 방법으로 수정할 수 있습니다. 현재 좌표축을 시계방향으로 회전시킵니다. 회전이 여러 번 호출되면 회전 각도가 겹쳐집니다.

Method	Parameters	Description
getActions	None	현재 컨텍스트에 저장된 그리기 동작 가져오기
clearActions	None	현재 저장된 그리기 작업 지우기
Deformation
scale		가로 및 세로 좌표의 크기 조정
rotate		좌표 축을 시계 방향으로 회전
translate		좌표 원점으로 Zoom
save	None	현재 좌표축의 스케일링, 회전, 평행 이동 정보를 저장
restore	None	이전에 저장된 좌표축의 스케일링, 회전, 평행 이동 정보 복원
Draw
clearRect		주어진 직사각형 영역 내에서 캔버스의 픽셀을 지웁니다
fillText		캔버스에 채워진 텍스트를 그립니다
drawImage
BeginPath	None	Start a path
closePath	None	Close a path
moveTo		선을 만들지 않고 캔버스의 지정된 지점으로 경로를 이동합니다.
lineTo		새 점을 추가한 다음 해당 점에서 마지막으로 지정한 점까지 캔버스에 선을 만듭니다.
direct		현재 경로에 직사각형 경로를 추가합니다.
arc		현재 경로에 시계 방향으로 그려진 호 경로를 추가합니다.
quadraticCurveTomin
	채우기 스타일 설정
	선 스타일 설정
	그림자 설정
	글꼴 크기 설정
	선 설정 끝점의 스타일
	두 선의 교차점 스타일 설정
	라인을 설정하세요 width
	최대 기울기 설정

Parameter	Type	Range	Description
rotate	Number	도 * Math.PI/180도 범위는 0~360	회전 각도(라디안 단위)

샘플 코드:

//rotate.js
Page({
  onReady:function(e){
    var context = wx.createContext();
    context.rect(50,50,200,200)
    context.stroke();
    context.rotate(5*Math.PI/180)
    context.rect(50,50,200,200)
      context.stroke();
      context.rotate(5*Math.PI/180)
      context.rect(50,50,200,200)
      context.stroke()

    wx.drawCanvas({
      canvasId:1,
      actions:context.getActions()
    });
  }
})

translate

현재 좌표계의 원점(0, 0)을 변환합니다. 좌표계의 기본 원점은 페이지의 왼쪽 상단입니다.

Parameter	Type	Range	Description
x	Number		수평 좌표 환산량
y	Number		세로좌표 환산량

샘플 코드:

//translate.js
Page({
  onReady:function(){
    var context = wx.createContext();

    context.rect(50,50,200,200)
    context.stroke()
    context.translate(50,50)
    context.rect(50,50,200,200)
    context.stroke();

    wx.drawCanvas({
      canvasId:1,
      actions:context.getActions()
    });
  }
})

---

clearRect

직사각형 영역 내 캔버스의 내용을 지웁니다

Number직사각형 영역 너비heightNumber직사각형 영역의 높이

샘플 코드:

//clearrect.js
Page({
  onReady:function(){
    var context = wx.createContext();

    context.rect(50,50,200,200)
    context.fill()
    context.clearRect(100,100,50,50)

    wx.drawCanvas({
      canvasId:1,
      actions:context.getActions()
    });
  }
})

drawImage

이미지를 그립니다. 이미지는 원래 크기를 유지합니다.

Parameters	Type	범위	설명

Parameters	Type	Scope	Description
imageResource	String	파일 경로 또는 프로젝트 디렉터리의 그림 가져오기	를 통해 그림 그리기
x	Number		x 이미지 왼쪽 위 모서리의 좌표
y	Number		y 이미지 왼쪽 위 모서리의 좌표

예:

//drawimage.js
Page({
  onReady:function(e){
    var context = wx.createContext();
    wx.chooseImage({
      success:function(res){
        context.drawImage(res.tempFilePaths[0],0,0)
        wx.drawCanvas({
          canvasId:1,
          actions:context.getActions()
        });
      }
    })
  }
})

fillText

캔버스에 채워진 텍스트를 그립니다.

Parameter	Type	Range	Description
text	String		캔버스의 텍스트 출력
x	Number		텍스트 그리기 왼쪽 상단 모서리의 x 좌표 위치
y	Number		그린 텍스트의 왼쪽 상단 모서리의 y 좌표 위치

샘플 코드:

//filltext.js
Page({
  onReady:function(){
    var context = wx.createContext();

    context.setFontSize(14)
    context.fillText("MINA",50,50)
    context.moveTo(0,50)
    context.lineTo(100,50)
    context.stroke();

    context.setFontSize(20)
    context.fillText("MINA",100,100)
    context.moveTo(0,100)
    context.lineTo(200,100)
    context.stroke();
    wx.drawCanvas({
      canvasId:1,
      actions:context.getActions()
    });
  }
})

---

beginPath

경로 만들기를 시작합니다. 경로를 칠 또는 획에 사용하려면 채우기 또는 획을 호출해야 합니다. 동일한 경로에 setFillStyle、setStrokeStyle、setLineWidth와 같은 여러 설정이 있는 경우 마지막 설정이 우선 적용됩니다.

closePage

경로를 닫습니다.

moveTo

선을 만들지 않고 캔버스의 지정된 지점으로 경로를 이동합니다.

lineTo

현재 위치에 새 점을 추가하고 해당 점에서 마지막으로 지정된 점까지 캔버스에 경로를 만듭니다.

Parameters	Type	Range	Description
x	Number	y	Number
목표 위치의 y 좌표		direct 현재 경로에 직사각형 경로를 추가합니다. arc 현재 경로에 시계 방향으로 그려진 호 경로를 추가합니다. quadraticCurveTo 2차 베지어 곡선 경로를 만듭니다. bezierCurveTo 3차 베지어 곡선 경로를 만듭니다. setFillStyle 단색 채우기를 설정합니다. 채우기 스타일로 색상 설정 Parameters Type Range Description color String 'rgb(255, 0, 0)' 또는 'rgba( 255, 0, 0, 0.6)' 또는 '#ff0000' 형식 색상 문자열 채우기 스타일의 색상으로 설정 setStrokeStyle 단색 획을 설정합니다. 매개변수는 setFillStyle과 동일합니다. 샘플 코드: //setfillstyle.js Page({   onReady:function(e){     var context = wx.createContext();     context.setFillStyle("#ff00ff");     context.setStrokeStyle("#00ffff");     context.rect(50,50,100,100)     context.fill()     context.stroke()     wx.drawCanvas({       canvasId:1,       actions:context.getActions()     });   } }) setShadow 그림자 스타일을 설정하세요. setFontSize 글꼴 크기를 설정합니다. setLineWidth 선의 너비를 설정합니다. setLineCap 선의 끝점 스타일을 설정합니다. setLineJoin 두 선이 교차할 때 생성되는 모서리 유형을 설정합니다. setMiterLimit 최대 마이터 길이를 설정합니다. 마이터 길이는 두 선의 교차점에서 내부 모서리와 외부 모서리 사이의 거리를 나타냅니다. setLineJoin이 'miter'인 경우에만 유효합니다. 최대 경사 길이를 초과하면 연결은 lineJoin bevel Parameter Type Range Description miterLimit Number 으로 표시됩니다. 최대 마이터 길이 샘플 코드: 다운로드 //line.js Page({   onReady:function(e){     var context = wx.createContext();     context.setLineWidth(10);     context.setLineCap("round")     context.setLineJoin("miter");     context.setMiterLimit(10);     context.moveTo(20,20);     context.lineTo(150,27);     context.lineTo(20,54);     context.stroke();     context.beginPath();     context.setMiterLimit(3);     context.moveTo(20,70);     context.lineTo(150,77);     context.lineTo(20,104);     context.stroke();     wx.drawCanvas({       canvasId:1,       actions:context.getActions()     });   } }) wx.drawCanvas(OBJECT) OBJECT 매개변수 설명: 예:다운로드 <!--canvas.wxml--><canvas cavas-id="firstCanvas" /> rrree ← WeChat 애플릿 API 그리기 인터페이스(참조) 및 메소드 목록 WeChat 애플릿 API 그리기 소개(캔버스에 그리는 방법) → 제출하다 PHP 중국어 웹사이트 집강의기사Q&A사전수동다운로드찾다 APP다운로드