WeChat 미니 프로그램 캔버스의 기본 사항에 대한 자세한 설명

캔버스 요소는 웹 페이지에 그래픽을 그리는 데 사용됩니다. HTML5의 캔버스 요소는 JavaScript를 사용하여 웹 페이지에 2D 이미지를 그립니다. 이 글에서는 주로 WeChat 미니 프로그램 캔버스의 기본 사항에 대한 자세한 설명을 공유하여 모든 사람에게 도움이 되기를 바랍니다.

1. 캔버스 이해

캔버스 태그의 기본 너비는 300px, 높이는 225px입니다.
동일한 페이지에 있는 canvas-id는 중복될 수 없습니다. 이미 표시된 canvas-id를 사용하면 해당 canvas 태그에 해당하는 캔버스가 숨겨지고 더 이상 제대로 작동하지 않습니다.

canvasId를 지정해야 합니다. 이 그리기 컨텍스트는 해당 <canvas/>

<!--canvas.wxml-->
<view class="container">
	<canvas canvas-id="myCanvas" class="myCanvas" ></canvas>
</view>

/**canvas.wxss*/
.myCanvas{
    border: 1px solid #ccc;
    width:100%;
    height:250px;
}

에서만 작동합니다.

(1 ) .단계

wxml:

<canvas canvas-id="myCanvas" clas
s="myCanvas" ></canvas>

1에서 캔버스 그림을 만듭니다. 상황

const ctx = wx.createCanvasContext('myCanvas')

2. Canvas

ctx.setFillStyle('red')

ctx.fillRect(10, 10, 150, 75)

3.Draw

ctx.draw()

(2).

//canvas.js 
//获取应用实例  
var app = getApp()  
Page({
	onLoad: function() {
		const ctx = wx.createCanvasContext('myCanvas');
		ctx.setFillStyle('red');
		ctx.fillRect(10, 10, 150, 75);
		ctx.draw();
	}
})

( 3) 효과.

방법 캔버스를 사용하여 호와 원을 그립니다

H5 캔버스를 사용하여 사격 효과 만들기

위 내용은 WeChat 미니 프로그램 캔버스의 기본 사항에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!