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

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

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

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

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFillStyle('red')

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

ctx.draw()

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