微信小程序canvas绘制渐变背景颜色方法
作者:xlnxin发布时间:2023-10-06分类:其他相关教程浏览:175
导读:<template><view class="mapp-container"><canvas ...
<template> <view class="mapp-container"> <canvas :style="{width: canvasWidth + 'px',height:canvasHeight + 'px'}" type="2d" canvas-id="myCanvas" id="myCanvas"></canvas> </view> </template> <script> export default { data() { return { canvasHeight: 0, canvasWidth: 0 } }, onLoad() { let { windowHeight, statusBarHeight } = uni.getSystemInfoSync(); this.canvasHeight = windowHeight; this.canvasWidth = this.rpxToPx(750); setTimeout(()=>{ this.init() },50) }, methods: { init() { let canvasH = this.canvasHeight; let canvasW = this.canvasWidth; const query = wx.createSelectorQuery() query.select('#myCanvas') .fields({node: true,size: true}) .exec((res) => { const canvas = res[0].node; const ctx = canvas.getContext('2d'); const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr // 获取宽 canvas.height = res[0].height * dpr // 获取高 ctx.scale(dpr, dpr) // 绘制背景 const grd = ctx.createLinearGradient(0, 0, 0, canvasH) grd.addColorStop(0, '#27D0FF') grd.addColorStop(0.5, '#ffffff') ctx.fillStyle = grd; ctx.fillRect(0, 0, canvasW, canvasH) }) }, // rpx转px rpxToPx(rpx) { const screenWidth = uni.getSystemInfoSync().screenWidth return (screenWidth * Number.parseInt(rpx)) / 750 }, } } </script>
- 上一篇:php 验证只能输入汉字/数字/英文
- 下一篇:js删除数组中键值为1的元素组
相关推荐
- 小程序Cannot read property 'enableUpdateWxAppCode'解决方法
- 如何完善小程序个人隐私设置?
- 小程序和H5中canvas卡顿的性能优化方向和实践
- 微信小程序image mode属性显示图片对应的格式详解
- 微信小程序--canvas画布实现图片的编辑
- es5且运算符(&&)
- 微信小程序源码开发:app.js错误:typerror:typeof3 is not a function
- 微信小程序反编译报SyntaxError: Unexpected token ‘}‘ 不完美的解决方法
- 微信小程序反编译工具 | unveilr
- 解决小程序反编译出现 app-service.js
- 其他相关教程排行
- 最近发表