微信小程序 canvas教程 - 1

2019-05-29 本文已影响0人 narcissus灬

一、canvas组件

在 test.wxml 中添加 canvas 组件

<canvas canvas-id='canvas-demo' class='demo'></canvas>
// canvas-id：必须填写

二、绘图

在 test.js 中进行绘图

let context = ex.createCanvasContext('canvas-demo')   // 为canvas-id = 'canvas-demo' 创建一个绘图上下文 CanvasContext 对象

1、CanvasContext.setFillStyle(color)

设置填充色

color: 填充的颜色，默认颜色为black

2、CanvasContext.fill()

对当前路径中的内容进行填充。默认的填充色为黑色。

注意：如果当前路径没有闭合，fill() 方法会将起点和终点进行连接，然后填充。
fill() 填充的的路径是从 beginPath() 开始计算，但是不会将 fillRect() 包含进去。

3、CanvasContext.setStrokeStyle(color)

设置描边色

color: 填充的颜色，默认颜色为black

4、CanvasContext.stroke()

画出当前路径的边框。默认颜色色为黑色。

stroke() 描绘的的路径是从 beginPath() 开始计算，但是不会将 strokeRect() 包含进去。

5、CanvasContext.beginPath()

开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边

在最开始的时候相当于调用了一次 beginPath。
同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置，以最后一次设置为准。

6、CanvasContext.closePath()

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

7、CanvasContext.moveTo(x, y)

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

x: 目标位置的 x 坐标
y: 目标位置的 y 坐标

8、CanvasContext.draw(reserve, callback)

将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。

reserve: 本次绘制是否接着上一次绘制。即 reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制；若 reserve 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认 false
callback: 绘制完成后执行的回调函数

三、图形

1、字

a、CanvasContext.fillText(text, x, y, maxWidth)

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

text: 在画布上输出的文本
x: 绘制文本的左上角 x 坐标位置
y: 绘制文本的左上角 y 坐标位置
maxWidth: 需要绘制的最大宽度

b、CanvasContext.setFontSize(fontSize)

设置字体的字号

fontSize: 字体的字号

c、CanvasContext.setTextAlign(align)

设置文字的对齐

align: 文字的对齐方式(left、center、right)

d、CanvasContext.setTextBaseline(textBaseline)

设置文字的竖直对齐

textBaseline: 文字的竖直对齐方式（top、bottom、middle、normal）
文字垂直对齐方式

2、圆、弧

a、CanvasContext.arc(x, y, r, sAngle, eAngle, counterclockwise)

创建一条弧线
创建一个圆可以指定起始弧度为 0，终止弧度为 2 * Math.PI。
用 stroke 或者 fill 方法来在 canvas 中画弧线。

x: 圆心的x轴坐标
y: 圆心的y轴坐标
r: 圆的半径
sAngle: 绘圆的起始位置（0默认3点中方向）取值为角度值
eAngle: 绘圆的结束位置取值为角度值
Math.PI 为9点中位置，2 * Math.PI 为3点钟方向
counterclockwise: 绘制圆的方向，默认为 false：顺时针，true：逆时针

ctx.arc(100, 75, 50, 0, Math.PI, true)    // 绘制一个上半圆
ctx.setFillStyle('#EEEEEE')      // 设置内部填充色
ctx.fill()    // 对当前路径中的内容进行填充。默认的填充色为黑色。如果当前路径没有闭合，fill() 方法会将起点和终点进行连接，然后填充。
ctx.draw()  // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。

3、矩形

a、CanvasContext.rect(x, y, width, height)

创建一个矩形路径。需要用 fill或者 stroke 方法将矩形真正的画到 canvas 中

x: 矩形路径左上角的横坐标
y: 矩形路径左上角的纵坐标
width: 矩形路径的宽度
height: 矩形路径的高度

ctx.rect(10, 10, 150, 75)
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

b、CanvasContext.fillRect(x, y, width, height)

填充一个矩形。用 setFillStyle 设置矩形的填充色，如果没设置默认是黑色。

x: 矩形路径左上角的横坐标
y: 矩形路径左上角的纵坐标
width: 矩形路径的宽度
height: 矩形路径的高度

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

c、CanvasContext.strokeRect(number x, number y, number width, number height)

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

x: 矩形路径左上角的横坐标
y: 矩形路径左上角的纵坐标
width: 矩形路径的宽度
height: 矩形路径的高度

ctx.setStrokeStyle('red')
ctx.strokeRect(10, 10, 150, 75)
ctx.draw()

4、线

a、CanvasContext.lineTo(x, y)

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

x: 目标位置的 x 坐标
y: 目标位置的 y 坐标

ctx.moveTo(0,0)
ctx.lineTo(100,100)
ctx.stroke()
ctx.draw()

b、绘制一个正方形，且4条边颜色不同

    ctx.beginPath()
    ctx.setStrokeStyle('#f00')
    ctx.moveTo(20,20)
    ctx.lineTo(120,20)
    ctx.stroke()

    ctx.beginPath()
    ctx.setStrokeStyle('#0f0')
    ctx.moveTo(120, 20)
    ctx.lineTo(120, 120)
    ctx.stroke()

    ctx.beginPath()
    ctx.setStrokeStyle('#00f')
    ctx.moveTo(120, 120)
    ctx.lineTo(20, 120)
    ctx.stroke()

    ctx.beginPath()
    ctx.setStrokeStyle('#f0f')
    ctx.moveTo(20, 120)
    ctx.lineTo(20, 20)
    ctx.stroke()

    ctx.draw()

c、绘制一个三角形，且填充颜色

    ctx.setFillStyle('#ff0')
    // ctx.setStrokeStyle('#f00')    // 设置边框颜色
    ctx.moveTo(20,20)
    ctx.lineTo(20,120)
    ctx.lineTo(120,120)
    ctx.lineTo(20,20)
    // ctx.stroke()    // 绘制边框
    ctx.fill()
    ctx.draw()

5、CanvasContext.setShadow(offsetX, offsetY, blur, color)

设定阴影样式

offsetX: 阴影相对于形状在水平方向的偏移，默认值为 0。
offsetY: 阴影相对于形状在竖直方向的偏移，默认值为 0。
blur: 阴影的模糊级别，数值越大越模糊。范围 0- 100。，默认值为 0。
color: 阴影的颜色。默认值为 black。

    ctx.setFillStyle('#f00')
    ctx.setShadow(0,0,50,'#f00')
    ctx.fillRect(50,50,100,50)
    ctx.draw()

5、图片

a、CanvasContext.drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

四、渐变色

1、CanvasContext.createLinearGradient(x0, y0, x1, y1)

创建一个线性的渐变颜色。返回的CanvasGradient对象需要使用 CanvasGradient.addColorStop() 来指定渐变点，至少要两个。

x0: 起点的 x0 坐标
y0: 起点的 y0 坐标
x: 终点的 x 坐标
y: 终点的 y 坐标

    // 创建一个CanvasGradient对象
    let grd = ctx.createLinearGradient(0, 0, 200, 0)
    grd.addColorStop(0, '#f00')
    grd.addColorStop(1, '#0f0')
    ctx.setFillStyle(grd)
    ctx.fillRect(10, 10, 150, 80)
    ctx.draw()

2、CanvasContext.createCircularGradient(x, y, r)

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

x: 圆心的 x 坐标
y: 圆心的 y 坐标
r: 圆的半径

    let grd = ctx.createCircularGradient(100, 100, 50)
    grd.addColorStop(0, 'red')
    grd.addColorStop(1, 'white')
    ctx.setFillStyle(grd)
    ctx.arc(100,100,75,0,2*Math.PI)
    ctx.fill()
    ctx.draw()

小程序canvas官方地址

微信小程序 canvas教程 - 1

一、canvas组件

二、绘图

1、CanvasContext.setFillStyle(color)

2、CanvasContext.fill()

3、CanvasContext.setStrokeStyle(color)

4、CanvasContext.stroke()

5、CanvasContext.beginPath()

6、CanvasContext.closePath()

7、CanvasContext.moveTo(x, y)

8、CanvasContext.draw(reserve, callback)

三、图形

1、字

a、CanvasContext.fillText(text, x, y, maxWidth)

b、CanvasContext.setFontSize(fontSize)

c、CanvasContext.setTextAlign(align)

d、CanvasContext.setTextBaseline(textBaseline)

2、圆、弧

a、CanvasContext.arc(x, y, r, sAngle, eAngle, counterclockwise)

3、矩形

a、CanvasContext.rect(x, y, width, height)

b、CanvasContext.fillRect(x, y, width, height)

c、CanvasContext.strokeRect(number x, number y, number width, number height)

4、线

a、CanvasContext.lineTo(x, y)

b、绘制一个正方形，且4条边颜色不同

c、绘制一个三角形，且填充颜色

5、CanvasContext.setShadow(offsetX, offsetY, blur, color)

5、图片

a、CanvasContext.drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

四、渐变色

1、CanvasContext.createLinearGradient(x0, y0, x1, y1)

2、CanvasContext.createCircularGradient(x, y, r)

猜你喜欢

热点阅读