canvas 标签默认宽度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;
}
二.在canvas中绘制图形
(1).步骤
wxml中:
<canvas canvas-id="myCanvas" class="myCanvas" ></canvas>
1.创建一个 Canvas 绘图上下文 CanvasContext
const ctx = wx.createCanvasContext('myCanvas')
2.们来描述要在 Canvas 中绘制什么内容
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
3.绘制
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).效果