小程序绘制之CanvasContext
2024-05-26 06:30:05
一、全局
1、draw
CanvasContext.draw(boolean reserve, function callback)
- reserve:本次绘制是否接着上一次绘制。即 reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制；若 reserve 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认 false。
- 绘制完成后执行的回调函数
示例：
const ctx = wx.createCanvasContext('myCanvas')ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.draw()
ctx.fillRect(50, 50, 150, 100)
ctx.draw(true)
2.restore
ctx.restore()
恢复之前保存的绘图上下文。前面一定有save();
3.save
ctx.save()
保存绘图上下文。
二、操作设置
1.开始路径绘制
CanvasContext.beginPath()
开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边
同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置，以最后一次设置为准。
在最开始的时候相当于调用了一次 beginPath。
2. 关闭路径
CanvasContext.closePath()
关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径，那之前的路径将不会被渲染。
const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.closePath()
ctx.stroke()
ctx.draw()
3.填充
CanvasContext.fill()
对当前路径中的内容进行填充。默认的填充色为黑色。
const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.fill()
ctx.draw()
4.绘制边框
CanvasContext.stroke()
画出当前路径的边框。默认颜色色为黑色。
const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.stroke()
ctx.draw()
三、样式设置
1. 设置填充颜色
CanvasContext.setFillStyle(string|CanvasGradient color)
填充的颜色，默认颜色为 black。
const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()
2.设置线条宽度
CanvasContext.setLineWidth(number lineWidth)
//lineWidth:线条的宽度，单位px
示例代码：
const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(150, 10)
ctx.stroke()ctx.beginPath()
ctx.setLineWidth(5)
ctx.moveTo(10, 30)
ctx.lineTo(150, 30)
ctx.stroke()ctx.beginPath()
ctx.setLineWidth(10)
ctx.moveTo(10, 50)
ctx.lineTo(150, 50)
ctx.stroke()ctx.beginPath()
ctx.setLineWidth(15)
ctx.moveTo(10, 70)
ctx.lineTo(150, 70)
ctx.stroke()ctx.draw()
3.设置线条的交点样式
CanvasContext.setLineJoin(string lineJoin)
//lineJoin 的合法值 bevel:斜角 round：圆角 miter：尖角
示例代码
const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(100, 50)
ctx.lineTo(10, 90)
ctx.stroke()ctx.beginPath()
ctx.setLineJoin('bevel')
ctx.setLineWidth(10)
ctx.moveTo(50, 10)
ctx.lineTo(140, 50)
ctx.lineTo(50, 90)
ctx.stroke()ctx.beginPath()
ctx.setLineJoin('round')
ctx.setLineWidth(10)
ctx.moveTo(90, 10)
ctx.lineTo(180, 50)
ctx.lineTo(90, 90)
ctx.stroke()ctx.beginPath()
ctx.setLineJoin('miter')
ctx.setLineWidth(10)
ctx.moveTo(130, 10)
ctx.lineTo(220, 50)
ctx.lineTo(130, 90)
ctx.stroke()ctx.draw()
4.设置线条的端点样式
CanvasContext.setLineCap(string lineCap)
//lineCap 的合法值 butt:向线条的每个末端添加平直的边缘
//round:向线条的每个末端添加圆形线帽
//square:向线条的每个末端添加正方形线帽
lineCap 的合法值
butt:向线条的每个末端添加平直的边缘
round:向线条的每个末端添加圆形线帽
square:向线条的每个末端添加正方形线帽
示例代码
const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(150, 10)
ctx.stroke()ctx.beginPath()
ctx.setLineCap('butt')
ctx.setLineWidth(10)
ctx.moveTo(10, 30)
ctx.lineTo(150, 30)
ctx.stroke()ctx.beginPath()
ctx.setLineCap('round')
ctx.setLineWidth(10)
ctx.moveTo(10, 50)
ctx.lineTo(150, 50)
ctx.stroke()ctx.beginPath()
ctx.setLineCap('square')
ctx.setLineWidth(10)
ctx.moveTo(10, 70)
ctx.lineTo(150, 70)
ctx.stroke()ctx.draw()
5.设置字体的字号
CanvasContext.setFontSize(number fontSize)
示例代码
const ctx = wx.createCanvasContext('myCanvas')ctx.setFontSize(20)
ctx.fillText('20', 20, 20)
ctx.setFontSize(30)
ctx.fillText('30', 40, 40)
ctx.setFontSize(40)
ctx.fillText('40', 60, 60)
ctx.setFontSize(50)
ctx.fillText('50', 90, 90)ctx.draw()
四、绘制操作
1.绘制线
CanvasContext.lineTo(number x, number y)
增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条
参数
示例代码
const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.rect(10, 10, 100, 50)
ctx.lineTo(110, 60)
ctx.stroke()
ctx.draw()
2.绘制矩形
CanvasContext.rect(number x, number y, number width, number height)
创建一个矩形路径。需要用 fill 或者 stroke 方法将矩形真正的画到 canvas 中
参数
示例代码
const ctx = wx.createCanvasContext('myCanvas')
ctx.rect(10, 10, 150, 75)
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()
3.绘制圆弧
CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)
参数:
number x
圆心的 x 坐标number y
圆心的 y 坐标number r
圆的半径number sAngle
起始弧度，单位弧度（在3点钟方向）number eAngle
终止弧度boolean counterclockwise
弧度的方向是否是逆时针
示例代码：
onst ctx = wx.createCanvasContext('myCanvas')// Draw coordinates
ctx.arc(100, 75, 50, 0, 2 * Math.PI)
ctx.setFillStyle('#EEEEEE')
ctx.fill()ctx.beginPath()
ctx.moveTo(40, 75)
ctx.lineTo(160, 75)
ctx.moveTo(100, 15)
ctx.lineTo(100, 135)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()ctx.setFontSize(12)
ctx.setFillStyle('black')
ctx.fillText('0', 165, 78)
ctx.fillText('0.5*PI', 83, 145)
ctx.fillText('1*PI', 15, 78)
ctx.fillText('1.5*PI', 83, 10)// Draw points
ctx.beginPath()
ctx.arc(100, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()ctx.beginPath()
ctx.arc(100, 25, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()ctx.beginPath()
ctx.arc(150, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()// Draw arc
ctx.beginPath()
ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
ctx.setStrokeStyle('#333333')
ctx.stroke()ctx.draw()
4.创建三次方贝塞尔曲线
CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
参数：
number cp1x
第一个贝塞尔控制点的 x 坐标number cp1y
第一个贝塞尔控制点的 y 坐标number cp2x
第二个贝塞尔控制点的 x 坐标number cp2y
第二个贝塞尔控制点的 y 坐标number x
结束点的 x 坐标number y
结束点的 y 坐标
示例代码:
const ctx = wx.createCanvasContext('myCanvas')// Draw points
ctx.beginPath()
ctx.arc(20, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()ctx.beginPath()
ctx.arc(200, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()ctx.beginPath()
ctx.arc(20, 100, 2, 0, 2 * Math.PI)
ctx.arc(200, 100, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()ctx.setFillStyle('black')
ctx.setFontSize(12)// Draw guides
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(20, 100)
ctx.lineTo(150, 75)ctx.moveTo(200, 20)
ctx.lineTo(200, 100)
ctx.lineTo(70, 75)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()// Draw quadratic curve
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()ctx.draw()
5.绘制文本
CanvasContext.fillText(string text, number x, number y, number maxWidth)
参数：
string text
在画布上输出的文本number x
绘制文本的左上角 x 坐标位置number y
绘制文本的左上角 y 坐标位置number maxWidth
需要绘制的最大宽度，可选
示例代码：
const ctx = wx.createCanvasContext('myCanvas')ctx.setFontSize(20)
ctx.fillText('Hello', 20, 20)
ctx.fillText('MINA', 100, 100)ctx.draw()
小程序绘制之CanvasContext相关推荐
- 微信小程序绘制分享图
微信小程序绘制分享图例子: demo下载地址:https://gitee.com/v-Xie/wxCanvasShar 大致代码会再以下说明 实际开发项目: 基础知识点: 了解canvas基础知识 w ...
- 微信小程序绘制海报，或者把多张图片合成一张
微信小程序绘制海报,或者把多张图片合成一张,例子 <image style='height:{{mabgh}}px;width:{{mabgw}}px;' class="savepng ...
- 小程序绘制海报的那些问题——记录一次uniapp小程序生成分享海报的问题及解决
最近做了一个需求,一个推广活动,在小程序中生成推广海报并且支持保存在手机相册,UI稿中呈现的是一个非全屏的固定宽高的海报图片,在保存的时候遇到了如下问题并一一解决 [问题1]开发者工具中可以正常绘制海 ...
- 微信小程序绘制canvas图片
1.效果图 2.注意事项 1.https网址图片需要预先下载到本地用wx.downloadFile方法 2.wx.downloadFile需要在微信公众号后台配置域名才能获取图片,如图: 3.代码 1 ...
- 微信小程序-绘制仪表盘
参考文章 1.微信小程序Canvas自绘图表之 仪表图(表盘) 2.canvas 实现环形渐变进度条 效果展示 前言 完整代码可移至参考文章1,若有需要,敬请移步.在此根据需要对样式进行了些修改,在此 ...
- uniapp小程序绘制二维码生成图片截图保存到本地
项目场景: 适应于uniapp中二维码生成图片进行截图保存 问题描述: 今天用uniapp写小程序二维码并保存到本地,网上的完全没有用,最后自己写了一个, 1.使用weapp.qrcode生成二维码, ...
- 微信小程序绘制二维码
一.前言 在日常的小程序项目中,会经常遇到需要动态绘制二维码的需求.使用场景很多,例如绘制在海报上,例如制作票务码.核销码等等. 这篇文章是应一位好友的需求而写的,也希望能够给有需要的同学一些帮助. ...
- 微信小程序绘制二维码（附微信小程序开发学习手册）
一.前言 在日常的小程序项目中,会经常遇到需要动态绘制二维码的需求.使用场景很多,例如绘制在海报上,例如制作票务码.核销码等等. 这篇文章是应一位好友的需求而写的,也希望能够给有需要的同学一些帮助. ...
- 小程序绘制海报保存到相册
说在前面的话 自己第一次制作了海报并且保存相册,故来记录一下...分享给需要的朋友,这里以字节小程序为例,明白思路,学以致用!!! 正文开始了(一本正经) 思路:1.用canvas绘图,将自己的海报绘 ...
最新文章
- bash shell 合并文件
- Python3算法基础练习：编程100例（ 21~ 25）
- 笔记-项目立项管理-项目的可行性研究-可行性研究内容
- git操作之版本控制
- 并查集模板——并查集(洛谷 P3367)
- (第一章)数据库的类型
- 林毅夫1.7万字长文：我的13个经济学新见解
- setting文件详解
- C语言中char s[] 和 char *s的区别
- 小打卡软件测试,考勤打卡软件大测评，这款打卡软件你有在用吗？
- Keil软件仿真STM32互补输出PWM
- 微信内点击链接或扫描二维码直接打开手机默认浏览器打开指定网页
- opencv canny源码解析_行人检测 基于 OpenCV 的人体检测
- ZYNQ - 嵌入式Linux开发 -10- ZYNQ启动流程分析
- 阿里云服务器断开连接后程序在后台运行办法
- 通信原理-第9章-数字信号的最佳接收
- 测试面试题——三角形
- 数仓埋点体系与归因实践
- Android开发者跳槽必备：写给程序员的Flutter详细教程，大厂直通车！
- OpenStack落地德国大众：锐意创新还是孤注一掷？