uni 开发小程序 使用canvas自定义海报，同时使用了fillRect（）和fillText（）时，导致的颜色覆盖问题

于 2024-05-28 16:37:43 发布
阅读量171 收藏
点赞数 3
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cultivate_DD/article/details/139271121
版权

这个时候，setFillStyle()会发生冲突，导致字体颜色将背景色覆盖，这个时候我们需要调用beginPath(),来重新开辟一个路径，解决

cultivate_DD
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序学习用demo：使用canvas绘制雷达图
03-15
微信小程序是一种轻量级的应用开发平台，主要针对移动端，它允许开发者通过微信的SDK构建具有交互功能的...通过学习和实践这个demo，你可以更好地理解和掌握微信小程序的开发流程，同时也能深入理解Canvas绘图的技巧。
fillText和fillRect的fillStyle互相影响
最新发布
m0_49471668的博客
12-06 220
是Canvas API的两个方法，分别用于填充文本和矩形。它们都使用了fillStyle属性来确定填充的颜色。如果你想要在填充矩形的同时保留文本的填充颜色，你可以在调用。会创建一个新的路径，并且这个新的路径会成为当前路径，而。就会在新路径上创建矩形，而不会影响到之前的文本路径。，并且两者使用了相同的fillStyle属性，那么。方法开启一个新的路径。是在之前的路径上创建的。
uniapp canvas绘图
颜良文丑的博客
10-08 6827
在H5中根据项目需求，将商品的图片，用户头像，二维码，商品信息绘制到分享海报中
canvas 详解 —— 绘制篇
qq_42880714的博客
07-22 8423
canvas 详解 —— 绘制篇
HTML5 canvas 中的 fillstyle fillrect strokeStyle strokeRect fill stroke rect 的简单理解
cysear的专栏
04-19 3493
fill和stroke英文释义 fill的意思是填充，stroke的意思是一笔，一划，可以理解为只画边框 fillStyle & strokeStyle 背景颜色可以通过fillStyle来实现，描边颜色可以通过strokeStyle来实现。 fillText &strokeText fillText        //在画布上画文本并填充预设定的fillStyle背景颜
uniapp中使用canvas画圆形及矩形进度条
potati的博客
02-19 1470
canvas绘制简单进度条
微信小程序-新版海报分享canvas2d实现（淘宝、京东、拼多多等都在用）
09-04
1、老版微信小程序canvas微信官方已经发声不再维护。 2、新版canvas2d海报，官方文档比较乱，开发起来难度大。 3、canvas2d生成海报效率高，资源开资少，性能强。 4、普通canvas生成海报比canvas2d稍慢。 5、通过...
微信小程序使用canvas自适应屏幕画海报并保存图片功能
10-16
主要介绍了小程序使用canvas自适应屏幕画海报并保存图片功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
分享功能，canvas绘制微信小程序分享海报
09-28
在微信小程序开发中，创建和分享自定义海报已经成为一种常见的用户互动方式，它能吸引用户参与并提升用户体验。本文将详细讲解如何利用canvas组件和微信小程序的分享功能来实现这一目标。 首先，我们要理解`open-...
uni-app之使用内置组件Canvas
码奴一只猿
07-04 1万+
UniApp 是一个基于 Vue.js 的跨平台开发框架，它允许开发者使用一套代码同时构建多个平台的应用程序。UniApp 提供了丰富的内置组件，其中包括 Canvas 组件，用于在应用中绘制图形和实现图形动画效果。本文将详细介绍 UniApp 内置组件 Canvas 的使用方法，以及提供示例代码和说明，帮助读者快速上手。
uniapp画图 uni.createcanvascontext
dddxz_2的博客
01-12 4880
用uni.createcanvascontext绘制图片。
canvas文字换行，多图片加载，显示错乱、或被覆盖的问题
u012685692的博客
04-17 671
【代码】canvas文字换行。
uni-app Canvas中解决文本颜色被背景色覆盖问题
weixin_42260975的博客
03-19 4831
uni-app Canvas中解决文本颜色被背景色覆盖问题 步骤1：用uni-app中的canvas绘制一矩形，边框设置为红色，背景色设置为黄色： draw: function() { context.beginPath() context.rect(25, 25, 50, 50); context.setFillStyle('yellow'); context.setStrokeStyle('red'); context.stroke(); contex
uniapp之小程序端生成分享海报（带自定义参数的二维码）
Jocelyn_书
08-24 7642
getToken() { uni.showLoading({ title: '加载中', mask: true }) let APPID = 'wxbb79e27e89dd25ce' let APPSECRET = '9e891651373f472e7e73948f6ba06a11' uni.request({ url: `https://api.weixin.qq.co.
uniapp的canvas使用以及自己踩的坑(小白 大神莫见笑)
m0_68804724的博客
12-07 2654
使用uni的canvas
微信小程序，canvas使用fillText()文字错位问题解决方案
qq_33900610的博客
02-10 1万+
一、问题 官方是这样解释的 ctx.fillText(string text, number x, number y, number maxWidth)的： 此API用于在在画布上绘制被填充的文本，其中，x和y分别表示文本距离左上角 x 和y坐标位置 const ctx = wx.createCanvasContext('myCanvas') ctx.setFontSize(20) ctx.fil...
uniapp 画布canvas的用法
热门推荐
weixin_38946164的博客
12-25 2万+
效果图： 代码： <template> <view class="demo"> <canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="myCanvas" id="myCanvas01"> </canvas> <button class="btn" type="primary" v-if="isShow" @click="saveImage"&
uniapp使用canvas开发app 对一个像素点编辑，存储自定义数据，添加图标
05-31
Uniapp使用Canvas开发App对于像素点编辑，存储自定义数据和添加图标的实现方法与上面的回答类似。下面是更加详细的步骤： 1. 在Vue组件中引入Canvas组件，并在template中定义Canvas的宽高以及id： ``` <template> <canvas id="myCanvas" :width="canvasWidth" :height="canvasHeight"></canvas> </template> ``` 2. 在mounted()生命周期函数中获取Canvas元素并创建2D渲染上下文： ``` mounted() { let canvas = uni.createSelectorQuery().select("#myCanvas"); canvas.fields( { node: true, size: true, }, (res) => { this.canvas = res.node; this.ctx = this.canvas.getContext("2d"); } ).exec(); } ``` 3. 在methods中定义一个函数来编辑像素点，并存储自定义数据： ``` methods: { editPixel(x, y, color, data) { this.ctx.fillStyle = color; this.ctx.fillRect(x, y, 1, 1); // 存储自定义数据 this.ctx.fillStyle = "#000000"; this.ctx.fillText(data, x, y); } } ``` 4. 调用editPixel函数来编辑像素点： ``` this.editPixel(10, 10, 'red', 'A'); ``` 5. 对于存储自定义数据，可以通过Canvas的toDataURL()方法将Canvas转换为base64编码的图像数据，然后将其存储到数据库中： ``` let dataUrl = this.canvas.toDataURL('image/png'); // 存储dataUrl到数据库中 ``` 6. 对于添加图标，可以通过uni.getImageInfo()方法获取图标的信息，然后在Canvas上绘制图像： ``` uni.getImageInfo({ src: 'icon.png', success: (res) => { this.ctx.drawImage(res.path, x, y); } }); ``` 注意：在uniapp中，获取Canvas元素需要使用uni.createSelectorQuery()方法，获取到的是一个异步对象，需要使用exec()方法执行。同时，绘制图像时需要使用图片的本地路径，需要通过uni.getImageInfo()方法获取。存储自定义数据可以通过在像素点上绘制文本实现，也可以通过在像素点上绘制图像来存储自定义数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值