画布。
效果展示
示例代码
方法一
WXML
<view class="page">
<view class="page__hd">
<text class="page__title">canvas</text>
<text class="page__desc">画布</text>
</view>
<view class="page__bd">
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
</view>
</view>
JS
Page({
onReady() {
this.drawCanvas()
},
drawCanvas() {
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createCanvasContext('firstCanvas')
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
context.stroke()
context.setStrokeStyle("#ff0000")
context.setLineWidth(2)
context.moveTo(160, 100)
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
context.stroke()
context.draw()
}
})
方法二
WXML
<view class="page">
<view class="page__hd">
<text class="page__title">canvas</text>
<text class="page__desc">画布</text>
</view>
<view class="page__bd">
<!-- 设置canvas的id,用于获取元素尺寸 -->
<canvas style="width:300px;height:300px" id="canvas" canvas-id="myCanvas"></canvas>
</view>
</view>
JS
Page({
onReady() {
this.drawCanvas()
},
drawCanvas() {
// 使用 wx.createSelectorQuery() 获取 canvas 的尺寸
const query = wx.createSelectorQuery()
query.select('#canvas') //select方法传入canvas元素的id
.fields({ size: true })
.exec((res) => {
// 从res[0]中获取元素的尺寸
console.log(res[0].width);
console.log(res[0].height);
console.log(res[0].top);
console.log(res[0].left);
console.log(res[0].bottom);
console.log(res[0].right);
console.log(res[0].x); //与left值相同
console.log(res[0].y); //与right值相同
//使用 wx.createContext 获取绘图上下文 context
var context = wx.createCanvasContext('myCanvas')
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
context.stroke()
context.setStrokeStyle("#ff0000")
context.setLineWidth(2)
context.moveTo(160, 100)
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
context.stroke()
context.draw()
})
}
})
API
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
canvas-id | string | 否 | canvas 组件的唯一标识符 |
多平台支持
属性 | 平台支持 |
---|---|
canvas-id | 支付宝 |
注释:
1.支付宝仅支持创建画布显示canvas,不支持fields方式