小程序绘制之CanvasContext

最新推荐文章于 2024-05-14 11:49:40 发布
最新推荐文章于 2024-05-14 11:49:40 发布
阅读量6k 收藏 8
点赞数 2
分类专栏： 微信小程序 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gusushantang/article/details/108092116
版权

一、全局

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()

在这里插入图片描述

GDAL
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序canvas 绘图方法，生成图片，下载图片所遇到的bug(跟canvas相关的bug)
想飞的猪的博客
04-15 1946
一、canvas 绘图方法及安卓手机出现绘图不准解决方案 原因：微信 canvas 绘制也是一个异步函数，即ctx.draw()是异步操作，在 ctx.draw() 后面直接获取 canvasToTempPath 是不能获取到 canvas 的具体内容的。所以ctx.draw(false,function(){// 当 canvas 绘制完成之后，调用，可以生成临时路径，并且获取完整的图片，...
小程序开发API之画布CanvasContext
M.Siebel
02-27 3729
Canvas 画布 所有在 中的画图必须用 JavaScript 完成： ** 示例一 index.wxml <canvas canvas-id="myCanvas" style="border: 1px solid;" /> index.js const ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('re...
微信小程序 CanvasContext.draw 的异步奥秘与实战技巧【附代码】
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-14 1056
在微信小程序中，是一个用于操作组件的上下文对象，通过它我们可以执行各种绘图操作，如填充颜色、绘制路径、添加文本等。draw()方法的作用是将当前画布上的所有绘图操作提交给系统，以便最终显示。重要的是，此方法执行后并不立即返回绘图完成的状态，而是异步进行，这意味着在调用之后立即访问画布内容可能尚未更新。异步设计是为了避免阻塞主线程，提高用户体验。尤其是在复杂的绘图场景下，异步机制能够确保用户界面保持响应，不会因长时间的绘图操作而卡顿。理解并掌握。
小程序画布之CanvasContext
冷月醉雪的博客
01-17 741
查看更多详情：CanvasContext · 语雀
wx小程序CanvasContext.draw是一个异步函数
黄彪博客
11-11 3645
文章目录文章参考问题描述API 说明问题分析 文章参考 wxapp-qrcode wx.canvasToTempFilePath(Object object, Object this) CanvasContext.draw(boolean reserve, function callback) 问题描述 在工作中根据后台传递过来的字符串，本地利用canvas生成二维码，后面立马调用了wx.ca...
JavaScript入门之Canvas(一): 2D Context
ddez46767的博客
08-23 162
概念 Canvas 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。自HTML5添加Canvas这个库，很快便得到了普及和发展，各个主流浏览器也速速支持，可见其强大。目前为止，IE9+、Firefox、Safari、Opera、Chrome、iOS版Safar...
canvas笔记-扩展canvas的context及画椭圆及浏览器兼容问题
IT1995的博客
06-03 1359
首先是扩展canvas的context 比如扩展一个画五角星的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="canvas" style="border: 1px solid #aaa; display:
微信小程序canvas实现椭圆（圆形）缩放
01-09
在微信小程序中，Canvas是用于绘制图形的重要组件，它可以让我们实现丰富的动态视觉效果。本示例专注于使用Canvas绘制椭圆（圆形）并实现其缩放功能。以下将详细讲解实现这个功能所需的知识点： 1. **Canvas API**...
分享功能，canvas绘制微信小程序分享海报
09-28
在微信小程序中，我们可以利用`wx.createSelectorQuery()`来获取canvas元素，并通过`canvasContext`接口进行绘图操作。以下是一个简单的海报绘制示例： ```javascript // 获取canvas元素 wx.createSelectorQuery()....
微信小程序：实现canvas绘制地图及简单拖动
03-17
在微信小程序中，Canvas可以通过`<canvas>`标签引入，每个`<canvas>`标签对应一个画布，可以通过`wx.createSelectorQuery()`获取到对应的CanvasContext，通过这个Context我们可以调用各种绘图方法，如`fillRect()`、...
微信小程序demo：利用canvas绘制折线图
03-15
在这个“微信小程序demo：利用canvas绘制折线图”的项目中，我们将探讨如何利用HTML5的Canvas API在微信小程序环境中创建动态的、交互式的折线图表。 Canvas是一个基于矢量图形的HTML元素，它可以用来在网页上动态...
is-canvas-context:变量是画布上下文
05-16
是画布上下文 变量是画布上下文 安装 如果尚未下载node，请从下载并安装。 npm install is-canvas-context --save 用法 import isCanvasContext from './' let canvas = document . createElement ( 'canvas' ) isCanvasContext ( canvas ) // false isCanvasContext ( canvas . getContext ( '2d' ) ) // true isCanvasContext ( 'not a context or canvas' ) // false 原料药 isCanvasContext(ctx:any):boolean 执照 国际学习中心
微信小程序canvas实现直线自由移动
01-12
在微信小程序中，Canvas是一个非常重要的组件，它允许开发者在界面上绘制图形，包括直线、曲线、圆形等。本文将详细讲解如何利用Canvas API在微信小程序中实现直线的自由移动。 首先，我们要理解Canvas的基本概念。...
微信小程序：真机上canvas使用canvasContext.drawImage图片不显示?
热门推荐
胡世林的博客
01-23 3万+
首先，明确两点，很多人的博客在写的时候，都是直接将图片的路径修改为网络路径，然后就再也不理，因为他们觉得这样是可以得，也许，这样是错的哦 第二点，腾讯的文档，最好跟着来，他不会跟你任何的扩展性的！！！！！！！！！！！！！！！！！！！！！！！！！ 好了，先来段代码： // pages/T-canvas/T-canvas.js Page({ /** * 页面的初始数据 */
canvas的学习
Richard_666的博客
07-04 125
<script> window.onload=function(){ var canvas = document.getElementById("canvas_1"); var context= canvas.getContext("2d"); context.fillStyle="#A9A9A9"; context.lineWidth=1; contex...
android初学之Context、@Override、Canvas简介
eeeeety6208的博客
10-01 189
//Context介绍Context，中文直译为“上下文”1、它描述的是一个应用程序环境的信息，即上下文。2、该类是一个抽象(abstract class)类，Android提供了该抽象类的具体实现。3、通过它我们可以获取应用程序的资源和类，也包括一些应用级别操作。在android中context可以作很多操作，但是最主要的功能是加载和访问资源。//程序中的@Override是什么意思？ @Override是Java5的元数据，自动加上去的一个标志，告诉你说下面这个方法是从父类/接口 继承过来的，需要你重写
小程序Canvas绘制时安卓和iOS的坑
UnendingHorse789的博客
03-31 1915
小程序的安卓和iOS的坑 使用Canvas绘制时，测试中发现iOS和开发环境中使用正常的CanvasContext.setFillStyle(‘transparent’)方法，在安卓机中无法正常使用，会导致Canvas绘制的内容无法正常显示，显示内容为空白图。具体代码如下： /** 绘制圆角矩形Canvas */ roundRect(ctx, x, y, w, h, r) { // 开始绘制 ...
微信小程序开发—(八)canvas绘制图形
oshan2012的博客
02-22 2478
一.小知识 (1).API接口 (2).context 对象的方法列表 二.步骤 wxml中： <canvas canvas-id="myCanvas" class="myCanvas" ></canvas> 在js文件onLoad: function() {}的方法中开始编写代码 1.创建一个 Canvas 绘图上下文 CanvasCon...
微信小程序CanvasContext怎么实现倒计时
05-30
可以使用CanvasContext中的`arc()`和`fillText()`方法来实现倒计时的效果。具体实现步骤如下： 1. 首先获取到CanvasContext的实例： ```javascript const ctx = wx.createCanvasContext('myCanvas'); ``` 2. 然后...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值