小程序
小游戏
企业微信
微信支付
扫描小程序码分享
请问有没有老师知道canvas画布如何求闭合区域面积或像素的问题
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
一般要做屏幕的分辨率和rpx到设计稿(一般设计稿按750px宽)像素之间的转换
// pages/canvas/index.js Page({ /** * 像素转换 * @param {*} arg */ rpx2px(arg) { const info = wx.getSystemInfoSync() const width = info.screenWidth return arg * width / 750 }, /** * 页面的初始数据 */ data: {}, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { const query = wx.createSelectorQuery() query.select('#cid') .fields({ node: true, size: true }) .exec((res) => { // Canvas 对象 const canvas = res[0].node this.canvas = canvas // Canvas 画布的实际绘制宽高 const width = res[0].width const height = res[0].height // 创建canvas渲染上下文 const ctx = canvas.getContext('2d') const dpr = wx.getWindowInfo().pixelRatio console.log('---dpr', dpr) // 手动改变canvas的宽和高 canvas.width = width * dpr canvas.height = height * dpr console.log(canvas.width, canvas.height) ctx.scale(dpr, dpr) ctx.fillStyle = 'orange' // 矩形填充 ctx.fillRect(this.rpx2px(0), this.rpx2px(0), this.rpx2px(750), this.rpx2px(500)) ctx.fillStyle = '#000000' ctx.font = `bold ${this.rpx2px(80)}px 宋体` ctx.textAlign = "center" // 文本水平居中 ctx.fillText('你好世界', this.rpx2px(750 / 2), this.rpx2px(100)) }) } })
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
一般要做屏幕的分辨率和rpx到设计稿(一般设计稿按750px宽)像素之间的转换
// pages/canvas/index.js Page({ /** * 像素转换 * @param {*} arg */ rpx2px(arg) { const info = wx.getSystemInfoSync() const width = info.screenWidth return arg * width / 750 }, /** * 页面的初始数据 */ data: {}, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { const query = wx.createSelectorQuery() query.select('#cid') .fields({ node: true, size: true }) .exec((res) => { // Canvas 对象 const canvas = res[0].node this.canvas = canvas // Canvas 画布的实际绘制宽高 const width = res[0].width const height = res[0].height // 创建canvas渲染上下文 const ctx = canvas.getContext('2d') const dpr = wx.getWindowInfo().pixelRatio console.log('---dpr', dpr) // 手动改变canvas的宽和高 canvas.width = width * dpr canvas.height = height * dpr console.log(canvas.width, canvas.height) ctx.scale(dpr, dpr) ctx.fillStyle = 'orange' // 矩形填充 ctx.fillRect(this.rpx2px(0), this.rpx2px(0), this.rpx2px(750), this.rpx2px(500)) ctx.fillStyle = '#000000' ctx.font = `bold ${this.rpx2px(80)}px 宋体` ctx.textAlign = "center" // 文本水平居中 ctx.fillText('你好世界', this.rpx2px(750 / 2), this.rpx2px(100)) }) } })