uniapp实现canvas画图

向右看齐 2022-10-07 11:44 942阅读 0赞

画布画图片和文字

//页面组件
    <canvas style="width:206px;height:180px;" id="canvas" canvas-id="canvas"></canvas>
    
    //js代码
    canvasFunction() { //画图
    	let goodsImg = " ";//要画的图片链接
    	let canvasW = 0;//宽度
    	let canvasH = 0;//高度
    	uni.getImageInfo({//获取图片高度宽度
    		src: goodsImg,
    		success: function(image) {
    			canvasW = image.width / 8;//因为需要所以缩放了8倍
    			canvasH = image.height / 8;
    		}
    	});
    	setTimeout(() => {
    		var ctx = uni.createCanvasContext('canvas', this);//创建一个画布
    		// 填充背景色
    		ctx.setFillStyle('#fff');//默认白色
    		ctx.fillRect(0, 0, 206, 180);//画布尺寸
    		// 商品图
    		ctx.drawImage(goodsImg, 40, 40, canvasW, canvasH);
    		console.log(canvasW);
    		console.log(canvasH);
    		// 价格
    		ctx.setFontSize(16); // 字号
    		ctx.setFillStyle('#e31d1a') // 颜色
    		ctx.fillText('￥299', 40, 40 + canvasH * 2);
    		ctx.draw(true, (ret) => { // 把以上内容画到 canvas 中
    			uni.canvasToTempFilePath({ // 保存canvas为图片
    				canvasId: 'canvas',
    				quality: 1,
    				complete: function(res) {
    					console.log(res)
    				},
    			})
    		});
    	}, 1500)
    },

发表评论取消回复

表情：

评论列表（有 0 条评论，942人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp 使用canvas 画图连线

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4

喜欢ヅ旅行/ 2023年02月20日 02:39/ 0 赞/ 83 阅读

相关 Qt--canvas画图（5.12）

Qt--canvas画图（5.12） 1 介绍 2 使用流程 3 简单示例 3.1 简单线、图形、文本、渐变、尺子 3.2 选

左手的ㄟ右手/ 2022年12月29日 00:11/ 0 赞/ 253 阅读

相关 html用画布画图,HTML5入门十---Canvas画布实现画图（一）

\}.ToolBar\{float:left;font-family:"微软雅黑";font-size:14px;font-variant:small-caps;text-al

水深无声/ 2022年10月10日 15:45/ 0 赞/ 261 阅读

相关 uniapp实现canvas画图

画布画图片和文字 //页面组件 <canvas style="width:206px;height:180px;" id="canvas" canvas-id

向右看齐/ 2022年10月07日 11:44/ 0 赞/ 943 阅读

相关通过画图自动生成html代码,如何使用HTML canvas来画图

将canvas添加到HTML中标签自身只有两个属性: width, height. 二者在没有指定的时候(标签内指定或者CSS指定)分别默认为300 pixels和150

ゝ一纸荒年。/ 2022年10月05日 12:46/ 0 赞/ 542 阅读

相关解决canvas画图模糊的问题

canvas 画图经常发现他是模糊的。解决这个问题主要从两个方面下手。 1. 改变canvas渲染的像素情况：画1像素的线条看起来模糊不清，好像更宽的样子。 ![bVs3

╰半夏微凉°/ 2022年06月16日 04:20/ 0 赞/ 388 阅读

相关 H5 canvas制作画图

1概述随着前端技术的发展，canvas使用的越累越多，而且越来越多的H5技术被应用到实际开发中，尤其是js插件更是无处不用，今天主要是分享一下如何去使用canv

我不是女神ヾ/ 2022年06月10日 06:37/ 0 赞/ 289 阅读

相关 canvas画图

<1>canvas画半圆 html: <canvas id="xxb" width="200" height="200"></canvas> js:

悠悠/ 2022年05月14日 07:09/ 0 赞/ 344 阅读

相关 uniapp canvas绘图生成海报

组件：tki-qrcode.vue 交流群：836383650 <template> <view class="content"> <butt

妖狐艹你老母/ 2021年09月19日 13:18/ 0 赞/ 1453 阅读

相关使用canvas画图，图形模糊怎么办

在说解决办法之前，例行惯例，简要的说明一下Html5中的Canvas。Canvas是Html5制图中常用的元素，但其本身并没有绘制能力，它仅仅是图形的容器，要制图还必须依靠脚本

红太狼/ 2021年09月17日 02:20/ 0 赞/ 632 阅读