uni-app canvas绘制图片和文字

快来打我* 2022-12-20 05:58 559阅读 0赞

### canvas画布 ###

*  绘制远程图片
 *  绘制文字

**前言**

前一段时间我们老师让我写一个关于画布功能的一个海报，这个海报是由图片和文字组成，刚开始我是不太了解这个画布的，后来各种百度…

--------------------

首先需要在结构层设置的画布宽高以及画布id

<view class="indeximg">
    		<canvas style="width: 100%;height: 450px; " canvas-id="firstCanvas"></canvas>
    	</view>

# 绘制远程图片 #

canvas无法直接读取远程图片，所以需要使用uni-app官网api

uni.getImageInfo({ 
    				src: "http://game.gtimg.cn/images/yxzj/act/a20160510story/relavance/heroes/hero48.jpg",
    				success(res) { 
    					console.log(res.path) 
    					var ctx = uni.createCanvasContext("firstCanvas") // 使用画布创建上下文 图片
    					ctx.drawImage(res.path, x, y, 100, 100)// 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
    					ctx.save();//保存
    					ctx.draw()//绘制
    				}
    			})

# 绘制文字 #

ctx.fillText("内容",240,40);//文字内容、x坐标，y坐标
    ctx.font = 'normal 20px STXingkai'; // 字体
    ctx.setFontSize(10) //设置字体大小，默认10
    ctx.setFillStyle('#DD524D') //文字颜色：默认黑色
    ctx.fillText("width:" + ctx.measureText(that.sent[0]).width, 50, 50) //显示文字宽度

发表评论取消回复

表情：

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

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

相关阅读

相关 Canvas系列绘制图片学习：绘制图片和渐变效果

我们现在已经可以绘制好多东西了，不过在实际开发中，绘制最多的当然是图片了，这章我们就讲讲图片的绘制。绘制图片绘制图片的API是`drawImage`，它的参数有三种

àì夳堔傛蜴生んèń/ 2024年03月27日 18:19/ 0 赞/ 89 阅读

相关 canvas详解04-绘制文字

绘制文本 canvas 提供了两种方法来渲染文本： fillText(text, x, y \[, maxWidth\]) 在指定的 (x,y) 位置填充指定的文本，

怼烎@/ 2023年10月12日 19:55/ 0 赞/ 70 阅读

相关 html2canvas 绘制海报框架uniapp

<div class="canDiv" ref="canDiv" v-show="haiBa"> <vi

小咪咪/ 2023年09月29日 11:02/ 0 赞/ 20 阅读

相关 uni-app canvas绘制图片和文字

canvas画布绘制远程图片绘制文字前言前一段时间我们老师让我写一个关于画布功能的一个海报，这个海报是由图片和文字组成，刚开始我是不太了解这

快来打我*/ 2022年12月20日 05:58/ 0 赞/ 560 阅读

相关 Canvas入门（3）:图像处理和绘制文字

来源：[http://www.ido321.com/997.html][http_www.ido321.com_997.html] 一、图像处理(非特别说明，所有结果均来自最

末蓝、/ 2022年08月13日 05:29/ 0 赞/ 282 阅读

相关 canvas渐变文字

使用canvas创建渐变文字。效果如下： ![Center][] 代码如下： <!DOCTYPE html> <html> <he

蔚落/ 2022年07月15日 08:36/ 0 赞/ 298 阅读

相关绘制文字

绘制文字的步骤 1、继承JPanel 2、重写Paint(Graphics p) 3、 g.setFont(new Font("楷体",Font.BOL

Bertha 。/ 2022年05月09日 15:40/ 0 赞/ 400 阅读

相关 Canvas--文字

文章目录文字的绘制文字的对齐水平对齐垂直居中获取文本宽度文字的绘制在Canvas中绘制文字，可以使用`s

待我称王封你为后i/ 2021年12月14日 22:07/ 0 赞/ 555 阅读

相关 canvas绘制文字

[`fillText(text, x, y [, maxWidth])`][fillText_text_ x_ y _ maxWidth] 在指定的(x,y)位置填充指定

古城微笑少年丶/ 2021年07月24日 18:26/ 0 赞/ 528 阅读

相关 canvas 图片绘制、视频绘制

canvas 1.canvas中绘制图片: img对象.onload=function(){ bi.drawImage

た入场券/ 2021年07月24日 11:36/ 0 赞/ 571 阅读