// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
canvas: {
size: {
width: 300,
height: 200,
}
}
},
onReady() {
let that = this
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
let globalData = app.globalData
that.initCanvas(canvas, globalData)
const ctx = canvas.getContext('2d')
ctx.fillStyle = "#f3f2f7"
ctx.fillRect(0, 0, globalData.windowWidth, globalData.windowHeight)
ctx.fillStyle = "#fff"
let main_block_horizontal_margin = 27
let main_block_vertical_margin = 80
let main_block_width = globalData.windowWidth - main_block_horizontal_margin * 2
let main_block_height = globalData.windowHeight - main_block_vertical_margin * 2
ctx.fillRect(main_block_horizontal_margin, main_block_vertical_margin, main_block_width, main_block_height);
that.drawLogo(canvas, ctx, globalData, {
main_block_horizontal_margin,
main_block_vertical_margin,
main_block_width,
main_block_height
})
})
},
initCanvas(canvas, globalData) {
let canvas_data = this.data.canvas
canvas_data.size.width = globalData.windowWidth
canvas_data.size.height = globalData.windowHeight
this.setData({
canvas: canvas_data
})
canvas.width = globalData.windowWidth
canvas.height = globalData.windowHeight
},
drawLogo(canvas, ctx, globalData, main_block) {
let image = canvas.createImage()
image.src = 'https://asset.gign.xyz/logo.png'
image.onload = () => {
let image_drawing_width = 200
let image_drawing_height = 200
let logo_block_horizontal_margin = (globalData.windowWidth - main_block.main_block_horizontal_margin * 2) / 2
let logo_block_vertical_margin = (globalData.windowHeight - main_block.main_block_vertical_margin * 2) / 2
let logo_margin =
ctx.drawImage(image, canvas.width / 2 - image_drawing_width / 2, 100, image_drawing_width, image_drawing_height)
}
},
onLoad() {
},
})
网友评论