微信小程序canvas绘制渐变背景颜色方法
作者:xlnxin发布时间:2023-10-06分类:其他教程浏览:813
导读:<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的元素组
相关推荐
- 双击excel打开不显示任何内容,只能在excel里面打开文件解决方法
- 小程序saveVideoToPhotosAlbum安卓手机可以下载MP4苹果手机不能下载解决方法
- 小程序逆向错误之 typeof3 is not a function
- 小程序e.target.dataset和e.currentTarget.dataset区别
- EXCEL双击不能直接打开EXCEL文件解决办法
- 微信小程序function函数arguments 是什么意思呢?
- 微信小程序、app之间的跳转代码
- 小程序登录获取openid后再执行页面的方法
- 小程序Cannot read property 'enableUpdateWxAppCode'解决方法
- 如何完善小程序个人隐私设置?
- 其他教程排行
- 最近发表