小程序
小游戏
企业微信
微信支付
扫描小程序码分享
canvas没有旋转画布整个的方法 要怎么旋转?
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
选一个中心点旋转画笔重绘内容就能起到旋转整个内容的效果
// 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' // 默认旋转按(0,0)点计算,所以如果要旋转矩形[0,0,750,500]的话,先修改中心点 ctx.translate(this.rpx2px(750 / 2), this.rpx2px(500 / 2)) // 再旋转30度 ctx.rotate(30 * Math.PI / 180); // 还原中心点 ctx.translate(-this.rpx2px(750 / 2), -this.rpx2px(500 / 2)) // 后续绘制按旋转后的方式绘制 // 矩形填充 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)) }) } })
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
你好,有找到方法做嘛
直接用css控制canvas标签旋转
你要不试试旋转canvas?
请学会如何「提问」(👈戳我)、【个体工商户】微信认证问题(👈戳我)
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
选一个中心点旋转画笔重绘内容就能起到旋转整个内容的效果
// 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' // 默认旋转按(0,0)点计算,所以如果要旋转矩形[0,0,750,500]的话,先修改中心点 ctx.translate(this.rpx2px(750 / 2), this.rpx2px(500 / 2)) // 再旋转30度 ctx.rotate(30 * Math.PI / 180); // 还原中心点 ctx.translate(-this.rpx2px(750 / 2), -this.rpx2px(500 / 2)) // 后续绘制按旋转后的方式绘制 // 矩形填充 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)) }) } })
你好,有找到方法做嘛
直接用css控制canvas标签旋转
你要不试试旋转canvas?
请学会如何「提问」(👈戳我)、【个体工商户】微信认证问题(👈戳我)