uniapp canvas绘制图形和文字

定义一个canvas文本

<canvas class="myCanvas" canvas-id="myCanvas" ></canvas>

初始化canvas

let testCanvas = uni.createCanvasContext('myCanvas',that);

开始绘制

/**
* img 图片路径，可线上图片也可本地图片
* offsetLeft x轴偏移量
* offsetTop  y轴偏移量
* canvasW canvas宽
* canvasH canvas高
* */testCanvas.drawImage(img,offsetLeft,offsetTop,canvasW,canvasH);testCanvas.beginPath();
testCanvas.setStrokeStyle("rgba(255,79,88,0)");
testCanvas.setLineWidth(0);
testCanvas.arc(left-12, item.topY+12.5, 4, 4, Math.PI, false);//圆
testCanvas.moveTo(left, item.topY);//三角形 第一个点
testCanvas.lineTo(left, item.topY+25); //三角形第二个点
testCanvas.lineTo(left-10, item.topY+12.5); //三角形第三个点
testCanvas.stroke()
testCanvas.rect(left, item.topY, 70, 25); //长方形绘制
testCanvas.fillStyle = 'rgba(255,79,88,.5)'; //若是给定了值就用给定的值否则给予默认值
testCanvas.fill();
testCanvas.stroke();
testCanvas.setFillStyle('#FFFFFF'); //文字颜色：默认黑色
testCanvas.setFontSize(14); //设置字体大小，默认10
testCanvas.fillText(item.name,left+5,item.topY+18);//文字内容、x坐标，y坐标 文字的样式设置必须放置在文字填充前
testCanvas.closePath();
//合成
testCanvas.draw(true,()=>{uni.canvasToTempFilePath({canvasId:'myCanvas',success: (res) => {uni.getImageInfo({src:res.tempFilePath,success(re) {// console.log(re)that.canvasShow = false;}})}})
})

uniapp canvas绘制图形和文字相关推荐

html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- Canvas 简介- 使用 Canvas 绘制图形- Canvas 常用方法- SVG 简介- 使用 SVG 绘制基本图形
1 Canvas 简介 Canvas 表示画布,现实生活中的画布是用来作画的. HTML5 中的 Canvas :我们可以称它为"网页中的画布".默认情况下,Canvas 是一块 ...
【canvas绘制图形】
canvas绘制图形一.绘制圆形二.绘制三角形三. 绘制矩形一.绘制圆形 <!DOCTYPE html> <html lang="en"> < ...
canvas绘制海报中文字自动换行
canvas:canvas绘制海报中文字自动换行问题描述 canvas绘制的海报在某一行文字过多时不会自动换行(设置文本宽度无用) 源代码 context.fillText(this.data.go ...
android 自定义多边形,Android:自定义view之Canvas绘制图形
前面讲解了onMeasure,接下来讲解onDraw,onDraw主要就是绘制,也就是我们真正关心的部分,使用的是Canvas绘图. @Override protected void onDraw(C ...
微信小程序开发—(八)canvas绘制图形
一.小知识 (1).API接口 (2).context 对象的方法列表二.步骤 wxml中: <canvas canvas-id="myCanvas" class=&quo ...
uniapp canvas绘制弧形圆环
项目uniapp 绘制弧形圆环首先说下:uniapp 插件市场有一个弧形进度条,作为组件引用的话是不兼容小程序,所以我做的是直接在本页面中进行绘制,刚开始也是作为组件进行引入的,但是小程序不兼容,无 ...
HTML5利用Canvas绘制图形(Canvas基本知识、绘制矩形、使用路径和图形组合)
绘制图形有很多方法,可以借助Flash实现,也可以使用SVG和VML来绘图.本次将要学习一种新的灰土方法--使用Canvas元素,它是基于HTML5原生的绘图功能.使用Canvas元素,可以绘制图形, ...
canvas绘制图形
第一步:html5页面中添加canvas元素 <canvas id="myCanvas" width="300" height="300&quo ...

uniapp canvas绘制图形和文字

uniapp canvas绘制图形和文字相关推荐

最新文章

热门文章