勇敢的_心_
勇敢的_心_

初识小程序-绘图(画布)

绘图

简介

API

方法 说明
createCanvasContext 创建 canvas 绘图上下文(指定 canvasId)
createContext(不推荐使用) 创建 canvas 绘图上下文
drawCanvas(不推荐使用) 进行绘图
canvasToTempFilePath 导出图片

context 对象的方法列表

颜色，样式，阴影

方法 说明
setFillStyle 设置填充样式
setStrokeStyle 设置线条样式
setShadow 设置阴影

渐变

方法 说明
createLinearGradient 创建一个线性渐变
createCircularGradient 创建一个圆形渐变
addColorStop 在渐变中的某一点添加一个颜色变化

线条样式

方法 说明
setLineWidth 设置线条宽度
setLineCap 设置线条端点的样式
setLineJoin 设置两线相交处的样式
setMiterLimit 设置最大倾斜

矩形

方法 说明
rect 创建一个矩形
fillRect 填充一个矩形
strokeRect 画一个矩形（不填充）
clearRect 在给定的矩形区域内，清除画布上的像素

路径

方法 说明
fill 对当前路径进行填充
stroke 对当前路径进行描边
beginPath 开始一个路径
closePath 关闭一个路径
moveTo 把路径移动到画布中的指定点，但不创建线条。
lineTo 添加一个新点，然后在画布中创建从该点到最后指定点的线条。
arc 添加一个弧形路径到当前路径，顺时针绘制。
quadraticCurveTo 创建二次方贝塞尔曲线
bezierCurveTo 创建三次方贝塞尔曲线

变形

方法 说明
scale 对横纵坐标进行缩放
rotate 对坐标轴进行顺时针旋转
translate 对坐标原点进行缩放

文字

方法 说明
fillText 在画布上绘制被填充的文本
setFontSize 设置字体大小
setTextBaseline 设置字体基准线
setTextAlign 设置字体对齐方式

图片

方法 说明
drawImage 在画布上绘制图像

混合

方法 说明
setGlobalAlpha 设置全局画笔透明度

其他

方法 说明
save 保存当前绘图上下文
restore 恢复之前保过的绘图上下文
draw 进行绘图
getActions(不推荐使用) 获取当前context上存储的绘图动作
clearActions(不推荐使用) 清空当前的存储绘图动作

intro

WXML：

JS：（我们在接下来的例子中会将 JS 放在 onLoad 中）

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

步骤：

第一步：创建一个 Canvas 绘图上下文
const ctx = wx.createCanvasContext('myCanvas')

第二步：使用 Canvas 绘图上下文进行绘图描述
//设置绘图上下文的填充色为红色：
ctx.setFillStyle('red')
//用 fillRect(x, y, width, height) 方法画一个矩形，填充为刚刚设置的红色：
ctx.fillRect(10, 10, 150, 75)

第三步：画图
ctx.draw()

coordinates

canvas 是在一个二维的网格当中。
左上角的坐标为(0, 0)。
方法 fillRect(0, 0, 150, 75)。
它的含义为：从左上角(0, 0)开始，画一个150 x 75px 的矩形。

demo:
把手指放到 canvas 中，就会在下边显示出触碰点的坐标：





Page({
  data: {
    x: 0,
    y: 0,
    hidden: true
  },
  start: function(e) {
    this.setData({
      hidden: false,
      x: e.touches[0].x,
      y: e.touches[0].y
    })
  },
  move: function(e) {
    this.setData({
      x: e.touches[0].x,
      y: e.touches[0].y
    })
  },
  end: function(e) {
    this.setData({
      hidden: true
    })
  }
})

gradient

渐变
渐变能用于填充一个矩形，圆，线，文字等。填充色可以不固定位固定的一种颜色。
两种颜色渐变的方式：
• createLinearGradient(x, y, x1, y1) - 创建一个线性的渐变
• createCircularGradient(x, y, r) - 创建一个从圆心开始的渐变
一旦我们创建了一个渐变对象，我们必须添加两个颜色渐变点。
addColorStop(position, color) 方法用于指定颜色渐变点的位置和颜色，位置必须位于0到1之间。
可以用setFillStyle() 和 setStrokeStyle() 方法设置渐变，然后进行画图描述。

使用 createLinearGradient()

const ctx = wx.createCanvasContext('myCanvas')
const grd = ctx.createLinearGradient(0,0,200,0)
grd.addColorStop(0,'red')
grd.addColorStop(1,'white')

ctx.setFillStyle(grd)
ctx.fillRect(10,10,150,80)
ctx.draw()

使用 createCircularGradient()

const ctx = wx.createCanvasContext('myCanvas')
const grd = ctx.createCircularGradient(75,50,50)
grd.addColorStop(0,'red')
grd.addColorStop(1,'white')

ctx.setFillStyle(grd)
ctx.fillRect(10,10,150,80)
ctx.draw()

reference

API接口

方法 说明
createCanvasContext 创建 canvas 绘图上下文(指定 canvasId)
canvasToTempFilePath 导出图片

context 对象的方法列表:颜色，样式，阴影

方法 说明
setFillStyle 设置填充样式
setStrokeStyle 设置线条样式
setShadow 设置阴影

渐变

方法 说明
createLinearGradient 创建一个线性渐变
createCircularGradient 创建一个圆形渐变
addColorStop 在渐变中的某一点添加一个颜色变化

线条样式

方法 说明
setLineWidth 设置线条宽度
setLineCap 设置线条端点的样式
setLineJoin 设置两线相交处的样式
setMiterLimit 设置最大倾斜

矩形

方法 说明
rect 创建一个矩形
fillRect 填充一个矩形
strokeRect 画一个矩形（不填充）
clearRect 在给定的矩形区域内，清除画布上的像素

路径

方法 说明
fill 对当前路径进行填充
stroke 对当前路径进行描边
beginPath 开始一个路径
closePath 关闭一个路径
moveTo 把路径移动到画布中的指定点，但不创建线条。
lineTo 添加一个新点，然后在画布中创建从该点到最后指定点的线条。
arc 添加一个弧形路径到当前路径，顺时针绘制。
quadraticCurveTo 创建二次方贝塞尔曲线
bezierCurveTo 创建三次方贝塞尔曲线

变形

方法 说明
scale 对横纵坐标进行缩放
rotate 对坐标轴进行顺时针旋转
translate 对坐标原点进行缩放

文字

方法 说明
fillText 在画布上绘制被填充的文本
setFontSize 设置字体大小
setTextBaseline 设置字体基准线
setTextAlign 设置字体对齐方式

图片

方法 说明
drawImage 在画布上绘制图像

混合

方法 说明
setGlobalAlpha 设置全局画笔透明度

其它

方法 说明
save 保存当前绘图上下文
restore 恢复之前保过的绘图上下文
draw 进行绘图
getActions(不推荐使用) 获取当前context上存储的绘图动作
clearActions(不推荐使用) 清空当前的存储绘图动作

color

用以下几种方式来表示 canvas 中使用的颜色：
• RGB 颜色： 如 'rgb(255, 0, 0)'
• RGBA 颜色：如 'rgba(255, 0, 0, 0.3)'
• 16 进制颜色： 如 '#FF0000'
• 预定义的颜色： 如 'red'

wx.canvasToTempFilePath(OBJECT, this)

把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径;

参数 类型 必填 说明 最低版本
x Number 否 画布x轴起点（默认0） 1.2.0
y Number 否 画布y轴起点（默认0） 1.2.0
width Number 否 画布宽度（默认为canvas宽度-x） 1.2.0
height Number 否 画布高度（默认为canvas高度-y） 1.2.0
destWidth Number 否 输出图片宽度（默认为width） 1.2.0
destHeight Number 否 输出图片高度（默认为height） 1.2.0
canvasId String 是 画布标识，传入 的 canvas-id
fileType String 否 目标文件的类型，只支持 'jpg' 或 'png'。默认为 'png' 1.7.0
quality Number 否 图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理 1.7.0
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） 
wx.canvasToTempFilePath({
  x: 100,
  y: 200,
  width: 50,
  height: 50,
  destWidth: 100,
  destHeight: 100,
  canvasId: 'myCanvas',
  success: function(res) {
    console.log(res.tempFilePath)
  }

wx.canvasGetImageData(OBJECT)

返回一个数组，用来描述 canvas 区域隐含的像素数据
OBJECT参数说明：

参数 类型 必填 说明
canvasId String 是 画布标识，传入 的 canvas-id
x Number 是 将要被提取的图像数据矩形区域的左上角 x 坐标
y Number 是 将要被提取的图像数据矩形区域的左上角 y 坐标
width Number 是 将要被提取的图像数据矩形区域的宽度
height Number 是 将要被提取的图像数据矩形区域的高度
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：

wx.canvasGetImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 100,
  height: 100,
  success(res) {
    console.log(res.width) // 100
    console.log(res.height) // 100
    console.log(res.data instanceof Uint8ClampedArray) // true
    console.log(res.data.length) // 100 * 100 * 4
  }
})

wx.canvasPutImageData(OBJECT)

将像素数据绘制到画布的方法

参数 类型 必填 说明
canvasId String 是 画布标识，传入 的 canvas-id
data Uint8ClampedArray 是 图像像素点数据，一维数组，每四项表示一个像素点的rgba
x Number 是 源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）
y Number 是 源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）
width Number 是 源图像数据矩形区域的宽度
height Number 否 源图像数据矩形区域的高度
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：

const data = new Uint8ClampedArray([255, 0, 0, 1])
wx.canvasPutImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 1,
  data: data,
  success(res) {}
})

canvasContext.setFillStyle

设置填充色。

如果没有设置 fillStyle，默认颜色为 black;

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

canvasContext.setStrokeStyle

设置边框颜色。
Tip: 如果没有设置 fillStyle，默认颜色为 black。

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.setStrokeStyle('red')
ctx.strokeRect(10, 10, 150, 75)
ctx.draw()

canvasContext.setShadow

设置阴影样式。
Tip: 如果没有设置，offsetX 默认值为0， offsetY 默认值为0， blur 默认值为0，color 默认值为 black。

参数 类型 范围 定义
offsetX Number 阴影相对于形状在水平方向的偏移
offsetY Number 阴影相对于形状在竖直方向的偏移
blur Number 0~100 阴影的模糊级别，数值越大越模糊
color Color 阴影的颜色

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.setShadow(10, 50, 50, 'blue')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

canvasContext.shadowBlur
设置阴影的模糊级别

canvasContext.shadowBlur = value

canvasContext.shadowColor
设置阴影的颜色

canvasContext.shadowColor = value

canvasContext.shadowOffsetX
设置阴影相对于形状在水平方向的偏移

canvasContext.shadowOffsetX = value

canvasContext.shadowOffsetY
设置阴影相对于形状在竖直方向的偏移

canvasContext.shadowOffsetY = value

canvasContext.createLinearGradient

创建一个线性的渐变颜色。
Tip: 需要使用 addColorStop() 来指定渐变点，至少要两个。

参数 类型 定义
x0 Number 起点的x坐标
y0 Number 起点的y坐标
x1 Number 终点的x坐标
y1 Number 终点的y坐标

eg:

const ctx = wx.createCanvasContext('myCanvas')

// Create linear gradient
const grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

canvasContext.createCircularGradient

创建一个圆形的渐变颜色。
Tip: 起点在圆心，终点在圆环。
Tip: 需要使用 addColorStop() 来指定渐变点，至少要两个。

参数 类型 定义
x Number 圆心的x坐标
y Number 圆心的y坐标
r Number 圆的半径

eg:

const ctx = wx.createCanvasContext('myCanvas')

// Create circular gradient
const grd = ctx.createCircularGradient(75, 50, 50)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

canvasContext.addColorStop

定义
创建一个颜色的渐变点。
Tip: 小于最小 stop 的部分会按最小 stop 的 color 来渲染，大于最大 stop 的部分会按最大 stop 的 color 来渲染。
Tip: 需要使用 addColorStop() 来指定渐变点，至少要两个。

eg:多彩

const ctx = wx.createCanvasContext('myCanvas')

// Create circular gradient
const grd = ctx.createLinearGradient(30, 10, 120, 10)
grd.addColorStop(0, 'red')
grd.addColorStop(0.16, 'orange')
grd.addColorStop(0.33, 'yellow')
grd.addColorStop(0.5, 'green')
grd.addColorStop(0.66, 'cyan')
grd.addColorStop(0.83, 'blue')
grd.addColorStop(1, 'purple')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

canvasContext.setLineWidth

设置线条的宽度。

eg:不同宽度的线条

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

canvasContext.setLineCap

定义
设置线条的端点样式。

参数 类型 范围 说明
lineCap String 'butt'、'round'、'square' 线条的结束端点样式

eg:

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

canvasContext.setLineJoin

定义
设置线条的交点样式。

参数 类型 范围 说明
lineJoin String 'bevel'、'round'、'miter' 线条的结束交点样式

语法：

canvasContext.setLineJoin(lineJoin)

eg:

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

canvasContext.setLineDash

设置线条的宽度。

参数 类型 说明
pattern Array 一组描述交替绘制线段和间距（坐标空间单位）长度的数字
offset Number 虚线偏移量

eg:虚线

const ctx = wx.createCanvasContext('myCanvas')

ctx.setLineDash([10, 20], 5);

ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();

ctx.draw()

canvasContext.setMiterLimit

定义
设置最大斜接长度，斜接长度指的是在两条线交汇处内角和外角之间的距离。 当 setLineJoin() 为 miter 时才有效。超过最大倾斜长度的，连接处将以 lineJoin 为 bevel 来显示
语法

canvasContext.setMiterLimit(miterLimit)
参数 类型 说明
miterLimit Number 最大斜接长度

eg:线的倾斜角度

const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(1)
ctx.moveTo(10, 10)
ctx.lineTo(100, 50)
ctx.lineTo(10, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(2)
ctx.moveTo(50, 10)
ctx.lineTo(140, 50)
ctx.lineTo(50, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(3)
ctx.moveTo(90, 10)
ctx.lineTo(180, 50)
ctx.lineTo(90, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(4)
ctx.moveTo(130, 10)
ctx.lineTo(220, 50)
ctx.lineTo(130, 90)
ctx.stroke()

ctx.draw()

canvasContext.rect

定义
创建一个矩形。
Tip: 用 fill() 或者 stroke() 方法将矩形真正的画到 canvas 中。

参数 类型 说明
x Number 矩形路径左上角的x坐标
y Number 矩形路径左上角的y坐标
width Number 矩形路径的宽度
height Number 矩形路径的高度

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.rect(10, 10, 150, 75)
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

canvasContext.fillRect

定义
填充一个矩形。
Tip: 用 setFillStyle() 设置矩形的填充色，如果没设置默认是黑色

参数 类型 说明
x Number 矩形路径左上角的x坐标
y Number 矩形路径左上角的y坐标
width Number 矩形路径的宽度
height Number 矩形路径的高度

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

canvasContext.strokeRect

定义
画一个矩形(非填充)。
Tip: 用 setFillStroke() 设置矩形线条的颜色，如果没设置默认是黑色。

参数 类型 说明
x Number 矩形路径左上角的x坐标
y Number 矩形路径左上角的y坐标
width Number 矩形路径的宽度
height Number 矩形路径的高度

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.setStrokeStyle('red')
ctx.strokeRect(10, 10, 150, 75)
ctx.draw()

canvasContext.clearRect

定义
清除画布上在该矩形区域内的内容。

Tip: clearRect 并非画一个白色的矩形在地址区域，而是清空

参数 类型 说明
x Number 矩形路径左上角的x坐标
y Number 矩形路径左上角的y坐标
width Number 矩形路径的宽度
height Number 矩形路径的高度

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(0, 0, 150, 200)
ctx.setFillStyle('blue')
ctx.fillRect(150, 0, 150, 200)
ctx.clearRect(10, 10, 150, 75)
ctx.draw()

canvasContext.fill

定义
对当前路径中的内容进行填充。默认的填充色为黑色。
Tip: 如果当前路径没有闭合，fill() 方法会将起点和终点进行连接，然后填充，详情见例一。
Tip: fill() 填充的的路径是从 beginPath() 开始计算，但是不会将 fillRect() 包含进去。

eg:填充三角形

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.fill()
ctx.draw()

eg:填充矩形

const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.setFillStyle('yellow')
ctx.fill()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

canvasContext.stroke

定义
画出当前路径的边框。默认颜色色为黑色。
Tip: stroke() 描绘的的路径是从 beginPath() 开始计算，但是不会将 strokeRect() 包含进去

eg:画路径（线条）

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.stroke()
ctx.draw()

eg2:

const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.setStrokeStyle('yellow')
ctx.stroke()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only stoke this rect, not in current path
ctx.setStrokeStyle('blue')
ctx.strokeRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will stroke current path
ctx.setStrokeStyle('red')
ctx.stroke()
ctx.draw()

canvasContext.beginPath

定义
开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。
Tip: 在最开始的时候相当于调用了一次 beginPath()。
Tip: 同一个路径内的多次setFillStyle()、setStrokeStyle()、setLineWidth()等设置，以最后一次设置为准

eg:

const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.setFillStyle('yellow')
ctx.fill()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

canvasContext.closePath

定义
关闭一个路径
Tip: 关闭路径会连接起点和终点。
Tip: 如果关闭路径后没有调用 fill() 或者 stroke() 并开启了新的路径，那之前的路径将不会被渲染;

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.closePath()
ctx.stroke()
ctx.draw()

eg2:

const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.closePath()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

canvasContext.moveTo

定义
把路径移动到画布中的指定点，不创建线条。
Tip: 用 stroke() 方法来画线条

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)

ctx.moveTo(10, 50)
ctx.lineTo(100, 50)
ctx.stroke()
ctx.draw()

canvasContext.lineTo

定义
lineTo 方法增加一个新点，然后创建一条从上次指定点到目标点的线。
Tip: 用 stroke() 方法来画线条

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.rect(10, 10, 100, 50)
ctx.lineTo(110, 60)
ctx.stroke()
ctx.draw()

canvasContext.arc

定义
画一条弧线。
Tip: 创建一个圆可以用 arc() 方法指定其实弧度为0，终止弧度为 2 * Math.PI。
Tip: 用 stroke() 或者 fill() 方法来在 canvas 中画弧线。

参数 类型 说明
x Number 圆的x坐标
y Number 圆的y坐标
r Number 圆的半径
sAngle Number 起始弧度，单位弧度（在3点钟方向）
eAngle Number 终止弧度
counterclockwise Boolean 可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。

eg:圆

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

canvasContext.bezierCurveTo

定义
创建三次方贝塞尔曲线路径。
Tip: 曲线的起始点为路径中前一个点。

参数 类型 说明
cp1x Number 第一个贝塞尔控制点的 x 坐标
cp1y Number 第一个贝塞尔控制点的 y 坐标
cp2x Number 第二个贝塞尔控制点的 x 坐标
cp2y Number 第二个贝塞尔控制点的 y 坐标
x Number 结束点的 x 坐标
y Number 结束点的 y 坐标

eg:不规则曲线

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

canvasContext.quadraticCurveTo

定义
创建二次贝塞尔曲线路径。
Tip: 曲线的起始点为路径中前一个点。

参数 类型 说明
cpx Number 贝塞尔控制点的x坐标
cpy Number 贝塞尔控制点的y坐标
x Number 结束点的x坐标
y Number 结束点的y坐标

eg:

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.setFillStyle('blue')
ctx.fill()

ctx.setFillStyle('black')
ctx.setFontSize(12)

// Draw guides
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(20, 100)
ctx.lineTo(200, 20)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()

// Draw quadratic curve
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.quadraticCurveTo(20, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()

ctx.draw()

canvasContext.scale

定义
在调用scale方法后，之后创建的路径其横纵坐标会被缩放。多次调用scale，倍数会相乘。

参数 类型 说明
scaleWidth Number 横坐标缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%)
scaleHeight Number 纵坐标轴缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%)

eg:

const ctx = wx.createCanvasContext('myCanvas')

ctx.strokeRect(10, 10, 25, 15)
ctx.scale(2, 2)
ctx.strokeRect(10, 10, 25, 15)
ctx.scale(2, 2)
ctx.strokeRect(10, 10, 25, 15)

ctx.draw()

canvasContext.rotate

定义
以原点为中心，原点可以用 translate方法修改。顺时针旋转当前坐标轴。多次调用rotate，旋转的角度会叠加。

参数 类型 说明
rotate Number 旋转角度，以弧度计(degrees * Math.PI/180；degrees范围为0~360)

eg:

const ctx = wx.createCanvasContext('myCanvas')

ctx.strokeRect(100, 10, 150, 100)
ctx.rotate(20 * Math.PI / 180)
ctx.strokeRect(100, 10, 150, 100)
ctx.rotate(20 * Math.PI / 180)
ctx.strokeRect(100, 10, 150, 100)

ctx.draw()

canvasContext.translate

定义
对当前坐标系的原点(0, 0)进行变换，默认的坐标系原点为页面左上角。

参数 类型 说明
x Number 水平坐标平移量
y Number 竖直坐标平移量

eg:

const ctx = wx.createCanvasContext('myCanvas')

ctx.strokeRect(10, 10, 150, 100)
ctx.translate(20, 20)
ctx.strokeRect(10, 10, 150, 100)
ctx.translate(20, 20)
ctx.strokeRect(10, 10, 150, 100)

ctx.draw()

canvasContext.clip

clip() 方法从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

eg:裁剪图片

const ctx = wx.createCanvasContext('myCanvas')

wx.downloadFile({
  url: 'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg',
  success: function(res) {
      ctx.save()
      ctx.beginPath()
      ctx.arc(50, 50, 25, 0, 2*Math.PI)
      ctx.clip()
      ctx.drawImage(res.tempFilePath, 25, 25)
      ctx.restore()
      ctx.draw()
  }
})

canvasContext.setFontSize

定义
设置字体的字号。

参数 类型 说明
fontSize Number 字体的字号

eg:

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

canvasContext.fillText

定义
在画布上绘制被填充的文本。

参数 类型 说明
text String 在画布上输出的文本
x Number 绘制文本的左上角x坐标位置
y Number 绘制文本的左上角y坐标位置
maxWidth Number 需要绘制的最大宽度，可选

eg:

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFontSize(20)
ctx.fillText('Hello', 20, 20)
ctx.fillText('MINA', 100, 100)

ctx.draw()

canvasContext.setTextAlign

用于设置文字的对齐

canvasContext.setTextAlign(align)

参数 类型 说明
align String 可选值 'left'、'center'、'right'

eg:

const ctx = wx.createCanvasContext('myCanvas')

ctx.setStrokeStyle('red')
ctx.moveTo(150, 20)
ctx.lineTo(150, 170)
ctx.stroke()

ctx.setFontSize(15)
ctx.setTextAlign('left')
ctx.fillText('textAlign=left', 150, 60)

ctx.setTextAlign('center')
ctx.fillText('textAlign=center', 150, 80)

ctx.setTextAlign('right')
ctx.fillText('textAlign=right', 150, 100)

ctx.draw()

canvasContext.setTextBaseline

用于设置文字的水平对齐
canvasContext.setTextBaseline(textBaseline)

参数 类型 说明
textBaseline String 可选值 'top'、'bottom'、'middle'、'normal'

eg:

const ctx = wx.createCanvasContext('myCanvas')

ctx.setStrokeStyle('red')
ctx.moveTo(5, 75)
ctx.lineTo(295, 75)
ctx.stroke()

ctx.setFontSize(20)

ctx.setTextBaseline('top')
ctx.fillText('top', 5, 75)

ctx.setTextBaseline('middle')
ctx.fillText('middle', 50, 75)

ctx.setTextBaseline('bottom')
ctx.fillText('bottom', 120, 75)

ctx.setTextBaseline('normal')
ctx.fillText('normal', 200, 75)

ctx.draw()

canvasContext.drawImage

定义
绘制图像到画布。

参数 类型 说明
imageResource String 所要绘制的图片资源
dx Number 图像的左上角在目标canvas上 X 轴的位置
dy Number 图像的左上角在目标canvas上 Y 轴的位置
dWidth Number 在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放
dHeigt Number 在目标画布上绘制图像的高度，允许对绘制的图像进行缩放
sx Number 源图像的矩形选择框的左上角 X 坐标
sy Number 源图像的矩形选择框的左上角 Y 坐标
sWidth Number 源图像的矩形选择框的高度
sHeight Number 源图像的矩形选择框的高度

eg:

const ctx = wx.createCanvasContext('myCanvas')

wx.chooseImage({
  success: function(res){
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
    ctx.draw()
  }
})

canvasContext.setGlobalAlpha

设置全局画笔透明度。

canvasContext.setGlobalAlpha(alpha)

参数 类型 范围 说明
alpha Number 0~1 透明度，0 表示完全透明，1 表示完全不透明

eg:

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.setGlobalAlpha(0.2)
ctx.setFillStyle('blue')
ctx.fillRect(50, 50, 150, 100)
ctx.setFillStyle('yellow')
ctx.fillRect(100, 100, 150, 100)

ctx.draw()

canvasContext.save

定义
保存当前的绘图上下文。

restore
定义
恢复之前保存的绘图上下文。

eg:

const ctx = wx.createCanvasContext('myCanvas')

// save the default fill style
ctx.save() 
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)

// restore to the previous saved state
ctx.restore()
ctx.fillRect(50, 50, 150, 100)

ctx.draw()

canvasContext.draw

定义
将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
Tip: 绘图上下文需要由 wx.createCanvasContext(canvasId) 来创建。

eg:

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.draw()
ctx.fillRect(50, 50, 150, 100)
ctx.draw()

canvasContext.measureText

测量文本尺寸信息，目前仅返回文本宽度。同步接口。

参数:
text String 要测量的文本

返回 TextMetrics 对象:
width Number 文本的宽度

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.font = 'italic bold 20px cursive'
const metrics = ctx.measureText('Hello World')
console.log(metrics.width)

canvasContext.globalCompositeOperation

该属性是设置要在绘制新形状时应用的合成操作的类型。

语法：
canvasContext.globalCompositeOperation = type

参数：
type String 标识要使用哪种合成或混合模式操作

canvasContext.arcTo

根据控制点和半径绘制圆弧路径。

语法
canvasContext.arcTo(x1, y1, x2, y2, radius)

参数

属性值 类型 说明
x1 Number 第一个控制点的 x 轴坐标
y1 Number 第一个控制点的 y 轴坐标
x2 Number 第二个控制点的 x 轴坐标
y2 Number 第二个控制点的 y 轴坐标
radius Number 圆弧的半径

canvasContext.strokeText

给定的 (x, y) 位置绘制文本描边的方法

语法
canvasContext.strokeText(text, x, y, maxWidth)

属性值 类型 说明
text String 要绘制的文本
x Number 文本起始点的 x 轴坐标
y Number 文本起始点的 y 轴坐标
maxWidth Number 需要绘制的最大宽度，可选

canvasContext.lineDashOffset

设置虚线偏移量的属性
语法
canvasContext.lineDashOffset = value

属性值 类型 说明
value Number 偏移量，初始值为 0

canvasContext.createPattern

对指定的图像创建模式的方法，可在指定的方向上重复元图像
语法
canvasContext.createPattern(image, repetition)

属性值 类型 说明
image String 重复的图像源，仅支持包内路径和临时路径
repetition String 指定如何重复图像，有效值有: repeat, repeat-x, repeat-y, no-repeat

eg:

const ctx = wx.createCanvasContext('myCanvas')
const pattern = ctx.createPattern('/path/to/image', 'repeat-x')
ctx.fillStyle = pattern
ctx.fillRect(0, 0, 300, 150)
ctx.draw()

canvasContext.setTransform

使用矩阵重新设置（覆盖）当前变换的方法
语法
canvasContext.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY)

属性值 类型 说明
scaleX Number 水平缩放
skewX Number 水平倾斜
skewY Number 垂直倾斜
scaleY Number 垂直缩放
translateX Number 水平移动
translateY Number 垂直移动

你可能感兴趣的:(初识小程序-绘图(画布))

  • 微信小程序监听用户经纬度变化 某公司摸鱼前端 微信小程序小程序
    一些打卡App需要根据用户的位置来完成打卡那么就需要监听用户位置变化情况：示例：//在某个生命周期函数中，如onLoad中onLoad:function(options){//开始监听位置变化wx.startLocationUpdate({success:function(){console.log('开始更新位置');},fail:function(){console.log('开始更新位置失败
  • 微信小程序修改checkbox和radio的样式 叶落无痕123 微信小程序小程序
    我们在开发小程序的时候，有时候需要修改小程序中checkbox和radio的原生样式，如何修改呢？这里给大家提供了一份代码，大家可以试试。首先是修改checkbox样式的代码：/*重写checkbox样式*//*未选中的背景样式*/checkbox.wx-checkbox-input{border-radius:50%;/*圆角*/width:40rpx;/*背景的宽*/height:40rpx;
  • 绽放 香痕空间藝術
    图片发自App2010.12-2002:42风在我身后仟漩那些诗句在仰望之上这是静谧地午后纷乱地思绪被风折起那些爱在不远的地方绽放层层地柔软地绽放在心的海上图片发自App燕子在晴空里翻转呢喃蜘蛛顺着窗台爬上网线一个下午都在想念断续地牵引着四肢的神经花和爱在午后地阳光里舒展着筋脉心底是一些淡淡地阳光在云之上你的目光被风折起深藏图片发自App莺尾花和酒在画布上游荡用清晰努力回忆着故乡地模样那些童年被岁
  • jupyter notebook 绘图中文显示乱码解决办法及绘图大小 爱吹口哨的夜莺 杂七杂八BUG
    importmatplotlib.pyplotaspltplt.rcParams['font.sans-serif']=['SimHei']plt.rcParams['axes.unicode_minus']=False插入上面代码即可参考博客：https://blog.csdn.net/silence2015/article/details/79097440?绘制图形大小：plt.rcParam
  • 排水游戏小程序开发｜娱乐游戏｜谁是卧底游戏开发 红匣子实力推荐
    排水游戏是一种常见的小程序游戏，它的目标是通过排放污水，使水位下降，达到预定的水位目标。这种游戏简单易玩，但是需要技巧和耐心。下面将详细介绍排水游戏小程序开发的流程和要点。游戏开发-联系电话：13642679953（微信同号）一、游戏概述排水游戏是一种常见的小程序游戏，它的目标是通过排放污水，使水位下降，达到预定的水位目标。游戏中有多个关卡，每个关卡的水位目标不同，难度也逐渐加大。玩家需要操作污水
  • Python学习笔记07 正文01 python学习笔记
    第十三章，面向对象初识对象生活中数据的组织学校开学，要求学生填写自己的基础信息，一人发一张白纸，让学生自己填我叫林军杰，今年31岁.来自山东省，我是男的，中国人内容混乱改为登记表，打印出来让学生自行填写：姓名林军杰姓别男国籍中国籍贯山东省年龄31整洁明了程序中数据的组织在程序中简单使用变量来记录学生信息student_1={"姓名"："周杰轮"，"性别"："男"，"国籍"："中国"，"籍贯"："台
  • js封装SDK 在VUE、小程序、公众号直接调用js调用后端接口（本文以vue项目为例） 祝你今天也快乐 jsvuejavascriptvue.js小程序
    1.封装一个js文件msgSdk.js注意：需要修改这个请求地址apiServiceAddress;(function(){if(window.msgSdk){return}varmsgSdk=(function(){varm_msgSdk=thisvarapiServiceAddress="http://172.12.14.5:8000"this.I_SendHTTPRequest=functi
  • 合肥微信小程序开发一般需要多少钱 A挑战自我
    合肥做一个小程序价格是不等的，主要看客户需求和功能，一般普通的一个微信小程序，合肥小程序制作公司可能报价3~5k，功能性的5k以上。那么，小程序多少钱做一个？做一个微信小程序大概多少钱？下面跟随安徽云帮邦网络一起来看看吧！一个小程序的费用是根据你的需求而定的，因为影响到小程序价格的因素有很多，例如类型、功能、开发方式等等都会影响到最终的价格。所以，要想知道最终的价格，你需要告诉我，你想做一个什么类
  • 【AIGC调研系列】kimi与其他AI助手相比的优势和劣势是什么 来自太平洋的暖湿气流 AIGC调研相关AIGC人工智能
    Kimi与其他AI助手相比，具有以下优势和劣势：优势：服务稳定性：Kimi的服务在境内，使用稳定[2]。多客户端支持：支持网页、APP、小程序等多个客户端，提高了用户的使用便捷性[2][4]。中文处理能力：Kimi在中文处理方面表现出色，这可能是因为其针对中文环境进行了优化[2]。实时联网搜索：能够实时联网搜索，与工作流结合紧密，提高了工作效率[2]。长文本处理能力：Kimi在长文本处理方面的能力
  • uniapp 开发微信小程序 出现启用组件按需注入问题如何解决 古猿写代码 uniappuni-app微信小程序小程序
    问题描述在使用uniapp开发微信小程序，进行上架发布时代码质量栏出现启用组件按需注入问题。虽然现实代码上传成功，但是作为一个吹毛求疵的老猿人，肯定是无法容忍的。那么如何解决呢？问题解决方案在uniapp端，特别注意不是在微信开发工具端，找到unpackage包，在下面找到app.json文件。在app.json文件中，加入一下代码：//解决启用组件按需注入问题"lazyCodeLoading":
  • 基于nodejs+vue智慧农业小程序python-flask-django-php QQ_1963288475 pythonvue.js小程序flaskdjangophpnode.js
    根据此问题，研发一套智慧农业小程序，既能够大大提高信息的检索、变更与维护的工作效率，也能够方便微信小程序的管理运用，从而减少信息管理成本，提高效率。该微信小程序主要设计并完成了管理过程中的用户注册登录、个人信息修改、用户信息、知识科普、土壤信息、水质信息、购物商城等功能。该微信小程序操作简便，界面设计简洁，不但可以基本满足本行业的日常管理工作，同时又可以有效减少人员成本和时间成本，为智慧农业管理工
  • 【划重点】小程序开发难吗？小白必看，沉浸式体验自己动手的乐趣！ 真仲为工作室 小程序开发小程序微信小程序
    随着移动互联网的发展，小程序已经成为了我们日常生活中不可或缺的一部分。无论是购物、出行还是娱乐，我们都能感受到小程序带来的便捷。然而，对于一些想要尝试自己开发小程序的人来说，他们可能会有疑问：小程序开发难吗？自己可以做吗？我们要明确一点，小程序的开发并不是一件非常困难的事情。虽然它涉及到编程知识，但是相比于传统的APP开发，小程序的开发难度要小很多。因为小程序的开发是基于微信这个庞大的平台，开发者
  • 小程序VS App，选哪个更划算？ 真仲为工作室 小程序开发小程序
    在移动应用开发的世界中，小程序和APP是两种主要的应用形式，它们各有特点，适应不同的业务需求和开发场景。对于许多企业和个人开发者而言，选择开发小程序还是APP是一个需要仔细考虑的决策。本文将对两者进行比较，帮助读者更好地理解它们的优劣和适用情况。小程序是一种无需下载安装即可使用的应用，它运行在微信、支付宝等大型社交平台内，用户通过扫码或搜索就能快速进入。小程序的开发门槛相对较低，更新迭代速度快，适
  • 有什么小程序适合个人开发？ 真仲为工作室 小程序开发小程序个人开发微信小程序
    在这个信息爆炸的时代，小程序已经成为了我们生活中的一部分。无论是出行、购物还是娱乐，小程序都能为我们提供便捷的服务。对于个人开发者来说，开发一个小程序不仅可以锻炼自己的技术能力，还可以为他人提供便利，甚至有可能成为一个成功的创业项目。那么，有哪些小程序适合个人开发呢？工具类小程序是一个不错的选择。这类小程序主要提供一些实用的工具，如计算器、天气预报、备忘录等。这类小程序的需求量大，用户群体广泛，而
  • 基于python+vue高校毕业生离校管理系统flask-django-php-nodejs QQ511008285 pythonvue.jsflaskdjangonode.jsphp
    课题主要采用Uni-weixin、django架构技术，前端以小程序页面呈现给用户，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生、教务人员、宿管员、图书管理员、财务人员、离校申请、物流信息、钥匙归还、图片归还、欠费信息、催缴信息等功能，从而实现智能化的管理方式，提高工作效率。关键字：高校毕业生离校管理系统；django框架；MySQL数据库语言：
  • 在微信小程序中使用微信支付功能 数字浪儿 微信小程序微信小程序微信开发语言
    相关配置部分不在多说：下面只看代码逻辑部分：constthat=this;//调用uniappAPIuni.getProvider获取服务供应商uni.getProvider({/*获取服务类型，可选值如下:*@paramshare:分享*@paramoauth:授权登录*@parampush:推送*@parampayment:支付类型*/service:'payment',success:(re
  • 【智能家居入门2】（MQTT协议、微信小程序、STM32、ONENET云平台） geeoni 智能家居微信小程序stm32
    此篇智能家居入门与前两篇类似，但是是使用MQTT协议接入ONENET云平台，实现微信小程序与下位机的通信，这里相较于使用http协议的那两篇博客，在主程序中添加了独立看门狗防止程序卡死和服务器掉线问题。后续还有使用MQTT协议连接MQTT服务器的智能家居项目。前言一、硬件模块二、连接服务器测试三、两个协议的对比分析1、代码结构上：2、获取服务器数据上：3、架构上：四、下位机主要代码1、接收并解析云
  • 【软件测试】如何设计自动化测试脚本 咖啡加剁椒④ 软件测试软件测试功能测试自动化测试程序人生职场和发展
    软件测试面试刷题，这个小程序（永久刷题），靠它快速找到工作了！（刷题APP的天花板）【持续更新最新版】-CSDN博客企业中如何设计自动化测试脚本呢？今天我们就来为大家分享一些干货。一、线性设计线性脚本设计方式是以脚本的方式体现测试用例，是一种非结构化的编码方式，多数采用录制+回放的方式，测试工程师通过录制+回访的访问对被测系统进行自动化测试，录制的脚本会产生某些冗余的代码内容或函数及脚本。线性设计
  • 学生兼职如何最快安全赚钱(学生兼职副业赚钱的方法) 幸运副业
    学生兼职如何最快安全赚钱(学生兼职副业赚钱的方法)然而，如何在保证学业的情况下，最快又安全地赚到钱成为了许多学生关注的焦点。本文将为大家详细介绍学生兼职的方法，并重点推荐一款微信小程序——多职猫兼职平台，让大家能够更加方便快捷地找到适合自己的兼职机会。推荐一篇找兼职必看的免费教程：《手机兼职，300-500/天，一单一结，大量要人》在这里可以找到各种打字录入兼职，数据标注兼职，游戏试玩兼职等适合大
  • 快团团小程序怎么做 4点学会就躺赚 氧惠爱高省
    快团团微信小程序是一个非常好用的卖货工具，如果想要在平台上实现躺赚，需要注意以上提到的四个方面的小技巧：账号准备、选品、流量和社群维护。抖音购物、看电影、点外卖、打车用氧惠APP！佣金更高、更优惠！氧惠（全网优惠上氧惠）——是与以往完全不同的抖客+淘客app！2023全新模式，我的直推也会放到你下面，送1:1超级补贴(邀请好友自购多少，你就推广得多少，非常厉害)，欢迎各位团队长体验！也期待你的加入
  • 每天知道多一点 Nanayai
    互联网头条】1.三大运营商9月1日5G商用，没有购机补贴的计划2.苹果回应iPhone辐射超标：符合所适用辐射规定和限制3.邮箱拟被纳入法定个人信息，网友：那百度网盘呢？4.iPhone或全线支持双卡双待，专门针对中国区5.2019中国民企500强出炉，榜首是华为，海航集团、苏宁控股分别排名第二和第三位6.微信联合三星手机推出小程序入口，支持即开即用7.喜马拉雅再传最高10亿美元IPO，回应：无明
  • 每日推荐11.07 西瓜绿2020
    分享时下比较流行的优秀国外设计，每日开眼一下；数量四组，每日积累一点点，提高设计审美！#小程序#UI01.音乐播放器移动UI套件模板https://www.uplabs.com/posts/music-player-mobile-ui-kits-template-81dc5e4e-8750-4854-bb10-4f4a01ff94b202.游戏设备商店移动UI套件模板https://www.upl
  • 计算机网络的功能和特点 潜※者 计算机网络
    1、数据通信这是最基本的功能。用来传送各种类型的信息，包括文字信件、新闻消息、资讯信息、图片资料、声音、视频流等各种多媒体信息。2、资源共享资源是指网络中所有的软件、硬件和数据，共享则是指网络中的用户能够部分或者全部地享受这些资源。如南京地区的社保数据库可供全网内其它地区的社保部门使用;一些大型的计算软件可供需要的地方或者人通过共享有偿调用或办理一定手续后调用;一些外部设备〈如彩色打印机、静电绘图
  • 回收小程序系统后台管理功能 软件开发li0810il 小程序微信小程序
    会员管理：管理员可以查看和管理会员的基本信息，如姓名、联系方式、寄送地址和订单记录等。产品管理：对回收物品进行管理，包括分类、规格设定、数据统计等。订单管理：对所有订单进行追踪和管理，确保订单处理的及时性和准确性。回收员管理：对回收员的调配、任务分配和绩效进行评估。区域管理：根据地理位置划分不同区域，并为每个区域分配回收员和设定回收策略。
  • 【C++】C++多线程资料总目录 bdview c++多线程javalinuxpython
    目录基础知识编程实践编码线程同步性能资源测试和调试注意事项基础知识【多线程】c++11多线程编程(一)——初识https://blog.csdn.net/bandaoyu/article/details/106084199【多线程】c++11多线程编程(二)——理解线程类的构造函数_bandaoyu的笔记-CSDN博客【多线程】c++11多线程编程(三)——竞争条件与互斥锁https://blog
  • uniapp app跳转微信小程序 风中凌乱的L uniappuni-app微信小程序小程序
    plus.share.getServices((s)=>{letsweixin={};for(leti=0;i
  • MySQL数据库操作学习(1) 一只特立独行猪 数据库mysql数据库mysql学习
    文章目录一_初识MySQL数据库1、数据库2、数据库分类1.关系型数据库2.非关系型数据库（备用）3、数据库概念1.数据（data）2.数据库（database）3.数据管理系统（DBMS）二、MySQL库操作了解SQLSQL语言的规则1、数据库查询2、数据库创建3、查询创建的数据库的所有信息4、切换使用数据库5、查看当前所在的数据库6、删除数据库三_MySQL表操作1、数据类型①字符串类型②数值
  • 开学了，我亦如此 如此亦好
    每个假期对我都是个考验。半年的变动把一年的马甲线消耗怠尽，不忍直视身材的走样。开学，我亦如此，而且把以后的每一天都当是开学。开始运用一些小程序来规束坏习惯。早安卡/运动数据。重点：运动+节食。节食节食节食。晨起项目已完成。今日加紧急减脂。减少坐的时间。站立同时敲打经络。
  • 【基于PSINS】误差计算函数 Evand J PSINS笔记笔记
    输入真值（参考值）、对比量、待比较值，输出误差的最大值、平均值、标准差的函数程序源码function[err]=EV_error_output(out_flag,avp_flag,avp,varargin)%draw_flag：以字符串的形式输入绘图的数据，eg：["EKF"，"UKF"]%avp：基准%avp_：用于对比的加速度、速度、位置%avp_flag：选择输出的是a、v、p中的哪一个,e
  • 一个简单的微信小程序表单提交样式模板 w宇宙王 微信小程序小程序
    没什么东西，只是方便自己直接复制使用.wxml姓名：学校：职位选择：提交.,scss.box{padding:30rpx;}.form-item{display:flex;background-color:rgb(221,230,230);margin-bottom:10rpx;border-radius:30rpx;}.head{line-height:100rpx;margin-left:30
  • java类加载顺序 3213213333332132 java
    package com.demo; /** * @Description 类加载顺序 * @author FuJianyong * 2015-2-6上午11:21:37 */ public class ClassLoaderSequence { String s1 = "成员属性"; static String s2 = "
  • Hibernate与mybitas的比较 BlueSkator sqlHibernate框架ibatisorm
    第一章     Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架，它出身于sf.net，现在已经成为Jboss的一部分。 Mybatis 是另外一种优秀的O/R mapping框架。目前属于apache的一个子项目。 MyBatis 参考资料官网：http:
  • php多维数组排序以及实际工作中的应用 dcj3sjt126com PHPusortuasort
    自定义排序函数返回false或负数意味着第一个参数应该排在第二个参数的前面, 正数或true反之, 0相等usort不保存键名uasort 键名会保存下来uksort 排序是对键名进行的 <!doctype html> <html lang="en"> <head> <meta charset="utf-8&q
  • DOM改变字体大小 周华华 前端
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
  • c3p0的配置 g21121 c3p0
    c3p0是一个开源的JDBC连接池，它实现了数据源和JNDI绑定，支持JDBC3规范和JDBC2的标准扩展。c3p0的下载地址是：http://sourceforge.net/projects/c3p0/这里可以下载到c3p0最新版本。 以在spring中配置dataSource为例： <!-- spring加载资源文件 --> <bean name="prope
  • Java获取工程路径的几种方法 510888780 java
    第一种： File f = new File(this.getClass().getResource("/").getPath()); System.out.println(f); 结果: C:\Documents%20and%20Settings\Administrator\workspace\projectName\bin 获取当前类的所在工程路径; 如果不加“
  • 在类Unix系统下实现SSH免密码登录服务器 Harry642 免密ssh
    1.客户机     (1)执行ssh-keygen -t rsa -C "[email protected]"生成公钥，xxx为自定义大email地址     (2)执行scp ~/.ssh/id_rsa.pub root@xxxxxxxxx:/tmp将公钥拷贝到服务器上，xxx为服务器地址     (3)执行cat
  • Java新手入门的30个基本概念一 aijuans javajava 入门新手
    在我们学习Java的过程中,掌握其中的基本概念对我们的学习无论是J2SE,J2EE,J2ME都是很重要的,J2SE是Java的基础,所以有必要对其中的基本概念做以归纳,以便大家在以后的学习过程中更好的理解java的精髓,在此我总结了30条基本的概念。　　Java概述:　　目前Java主要应用于中间件的开发(middleware)---处理客户机于服务器之间的通信技术,早期的实践证明,Java不适合
  • Memcached for windows 简单介绍 antlove javaWebwindowscachememcached
    1. 安装memcached server a. 下载memcached-1.2.6-win32-bin.zip b. 解压缩，dos 窗口切换到 memcached.exe所在目录，运行memcached.exe -d install c.启动memcached Server,直接在dos窗口键入 net start "memcached Server&quo
  • 数据库对象的视图和索引 百合不是茶 索引oeacle数据库视图
      视图     视图是从一个表或视图导出的表，也可以是从多个表或视图导出的表。视图是一个虚表，数据库不对视图所对应的数据进行实际存储，只存储视图的定义，对视图的数据进行操作时,只能将字段定义为视图,不能将具体的数据定义为视图       为什么oracle需要视图;    &
  • Mockito(一) --入门篇 bijian1013 持续集成mockito单元测试
            Mockito是一个针对Java的mocking框架，它与EasyMock和jMock很相似，但是通过在执行后校验什么已经被调用，它消除了对期望 行为（expectations）的需要。其它的mocking库需要你在执行前记录期望行为（expectations），而这导致了丑陋的初始化代码。  &nb
  • 精通Oracle10编程SQL(5)SQL函数 bijian1013 oracle数据库plsql
    /* * SQL函数 */ --数字函数 --ABS(n):返回数字n的绝对值 declare v_abs number(6,2); begin v_abs:=abs(&no); dbms_output.put_line('绝对值：'||v_abs); end; --ACOS(n):返回数字n的反余弦值，输入值的范围是-1~1，输出值的单位为弧度
  • 【Log4j一】Log4j总体介绍 bit1129 log4j
    Log4j组件：Logger、Appender、Layout   Log4j核心包含三个组件：logger、appender和layout。这三个组件协作提供日志功能： 日志的输出目标 日志的输出格式 日志的输出级别(是否抑制日志的输出)  logger继承特性 A logger is said to be an ancestor of anothe
  • Java IO笔记 白糖_ java
    public static void main(String[] args) throws IOException { //输入流 InputStream in = Test.class.getResourceAsStream("/test"); InputStreamReader isr = new InputStreamReader(in); Bu
  • Docker 监控 ronin47 docker监控
             目前项目内部署了docker，于是涉及到关于监控的事情，参考一些经典实例以及一些自己的想法，总结一下思路。 1、关于监控的内容 监控宿主机本身 监控宿主机本身还是比较简单的，同其他服务器监控类似，对cpu、network、io、disk等做通用的检查，这里不再细说。 额外的，因为是docker的
  • java-顺时针打印图形 bylijinnan java
    一个画图程序 要求打印出： 1.int i=5; 2.1 2 3 4 5 3.16 17 18 19 6 4.15 24 25 20 7 5.14 23 22 21 8 6.13 12 11 10 9 7. 8.int i=6 9.1 2 3 4 5 6 10.20 21 22 23 24 7 11.19
  • 关于iReport汉化版强制使用英文的配置方法 Kai_Ge iReport汉化英文版
    对于那些具有强迫症的工程师来说，软件汉化固然好用，但是汉化不完整却极为头疼，本方法针对iReport汉化不完整的情况，强制使用英文版，方法如下： 在 iReport 安装路径下的 etc/ireport.conf 里增加红色部分启动参数，即可变为英文版。   # ${HOME} will be replaced by user home directory accordin
  • [并行计算]论宇宙的可计算性 comsci 并行计算
          现在我们知道,一个涡旋系统具有并行计算能力.按照自然运动理论,这个系统也同时具有存储能力,同时具备计算和存储能力的系统,在某种条件下一般都会产生意识......       那么,这种概念让我们推论出一个结论     &nb
  • 用OpenGL实现无限循环的coverflow dai_lm androidcoverflow
    网上找了很久，都是用Gallery实现的，效果不是很满意，结果发现这个用OpenGL实现的，稍微修改了一下源码，实现了无限循环功能 源码地址： https://github.com/jackfengji/glcoverflow public class CoverFlowOpenGL extends GLSurfaceView implements GLSurfaceV
  • JAVA数据计算的几个解决方案1 datamachine javaHibernate计算
    老大丢过来的软件跑了10天，摸到点门道，正好跟以前攒的私房有关联，整理存档。 -----------------------------华丽的分割线-------------------------------------     数据计算层是指介于数据存储和应用程序之间，负责计算数据存储层的数据，并将计算结果返回应用程序的层次。J  &nbs
  • 简单的用户授权系统,利用给user表添加一个字段标识管理员的方式 dcj3sjt126com yii
    怎么创建一个简单的(非 RBAC)用户授权系统 通过查看论坛，我发现这是一个常见的问题，所以我决定写这篇文章。 本文只包括授权系统.假设你已经知道怎么创建身份验证系统(登录)。 数据库 首先在 user 表创建一个新的字段(integer 类型),字段名 'accessLevel',它定义了用户的访问权限 扩展 CWebUser 类 在配置文件(一般为 protecte
  • 未选之路 dcj3sjt126com 诗
    作者:罗伯特*费罗斯特   黄色的树林里分出两条路, 可惜我不能同时去涉足, 我在那路口久久伫立, 我向着一条路极目望去, 直到它消失在丛林深处.   但我却选了另外一条路, 它荒草萋萋,十分幽寂; 显得更诱人,更美丽, 虽然在这两条小路上, 都很少留下旅人的足迹.   那天清晨落叶满地, 两条路都未见脚印痕迹. 呵,留下一条路等改日再
  • Java处理15位身份证变18位 蕃薯耀 18位身份证变15位15位身份证变18位身份证转换
      15位身份证变18位，18位身份证变15位 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 201
  • SpringMVC4零配置--应用上下文配置【AppConfig】 hanqunfeng springmvc4
    从spring3.0开始，Spring将JavaConfig整合到核心模块，普通的POJO只需要标注@Configuration注解，就可以成为spring配置类，并通过在方法上标注@Bean注解的方式注入bean。   Xml配置和Java类配置对比如下： applicationContext-AppConfig.xml   <!-- 激活自动代理功能 参看：
  • Android中webview跟JAVASCRIPT中的交互 jackyrong JavaScripthtmlandroid脚本
      在android的应用程序中,可以直接调用webview中的javascript代码,而webview中的javascript代码,也可以去调用ANDROID应用程序(也就是JAVA部分的代码).下面举例说明之: 1 JAVASCRIPT脚本调用android程序    要在webview中,调用addJavascriptInterface(OBJ,int
  • 8个最佳Web开发资源推荐 lampcy 编程Web程序员
    Web开发对程序员来说是一项较为复杂的工作，程序员需要快速地满足用户需求。如今很多的在线资源可以给程序员提供帮助，比如指导手册、在线课程和一些参考资料，而且这些资源基本都是免费和适合初学者的。无论你是需要选择一门新的编程语言，或是了解最新的标准，还是需要从其他地方找到一些灵感，我们这里为你整理了一些很好的Web开发资源，帮助你更成功地进行Web开发。 这里列出10个最佳Web开发资源，它们都是受
  • 架构师之面试------jdk的hashMap实现 nannan408 HashMap
    1.前言。   如题。 2.详述。   (1)hashMap算法就是数组链表。数组存放的元素是键值对。jdk通过移位算法（其实也就是简单的加乘算法），如下代码来生成数组下标(生成后indexFor一下就成下标了）。 static int hash(int h) { h ^= (h >>> 20) ^ (h >>>
  • html禁止清除input文本输入缓存 Rainbow702 html缓存input输入框change
    多数浏览器默认会缓存input的值，只有使用ctl+F5强制刷新的才可以清除缓存记录。 如果不想让浏览器缓存input的值，有2种方法： 方法一： 在不想使用缓存的input中添加 autocomplete="off";  <input type="text" autocomplete="off" n
  • POJO和JavaBean的区别和联系 tjmljw POJOjava beans
    POJO 和JavaBean是我们常见的两个关键字，一般容易混淆，POJO全称是Plain Ordinary Java Object / Pure Old Java Object，中文可以翻译成：普通Java类，具有一部分getter/setter方法的那种类就可以称作POJO，但是JavaBean则比 POJO复杂很多， Java Bean 是可复用的组件，对 Java Bean 并没有严格的规
  • java中单例的五种写法 liuxiaoling java单例
    /** * 单例模式的五种写法： * 1、懒汉 * 2、恶汉 * 3、静态内部类 * 4、枚举 * 5、双重校验锁 */ /** * 五、 双重校验锁，在当前的内存模型中无效 */ class LockSingleton { private volatile static LockSingleton singleton; pri
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他