画布

接口声明

使用 画布 接口前，需要在js代码中，通过canvas组件的 getContext() 获取 画布 对象。

var canvasComponent = this.$element(canvasId)
var canvas = canvasComponent.getContext(“2d”)

使用限制

属性

属性示例代码

[h2]fillStyle for Color

var test = this.$element("1Canvas");
var ctx = test.getContext("2d");
console.log("ctx.fillStyle 111 >> " + ctx.fillStyle);
ctx.fillStyle = "#0000ff";
ctx.fillRect(20, 20, 150, 100);
console.log("ctx.fillStyle 222 >> " + ctx.fillStyle);

示例代码效果图

[h2]fillStyle for createLinearGradient()

var test = this.$element("2Canvas");
var ctx = test.getContext("2d");
console.log("ctx.fillStyle 333 >> " + ctx.fillStyle);
var my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
console.log("yyyy", "my_gradient =" + my_gradient);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
console.log("ctx.fillStyle 444 >> " + ctx.fillStyle);
ctx.fillRect(20, 20, 150, 100);

示例代码效果图

[h2]strokeStyle for Color

var test = this.$element("4Canvas");
var ctx = test.getContext("2d");
console.log("ctx.strokeStyle 111 >> " + ctx.strokeStyle);
ctx.strokeStyle = "#0000ff";
ctx.strokeRect(20, 20, 150, 100);
console.log("ctx.strokeStyle 222 >> " + ctx.strokeStyle);

示例代码效果图

[h2]strokeStyle for createLinearGradient()

var test = this.$element("5Canvas");
var ctx = test.getContext("2d");
console.log("ctx.strokeStyle 333 >> " + ctx.strokeStyle);
var gradient = ctx.createLinearGradient(0, 0, 170, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// 用渐变进行填充
ctx.strokeStyle = gradient;
ctx.lineWidth = 5;
ctx.strokeRect(20, 20, 150, 100);
console.log("ctx.strokeStyle 444 >> " + ctx.strokeStyle);

示例代码效果图

[h2]shadow

var ctx = test.getContext("2d");
ctx.shadowBlur = 20;
ctx.shadowColor = "black";
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 20;
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 80);
console.log("ctx.shadowBlur 222 >> " + ctx.shadowBlur);
console.log("ctx.shadowColor 222 >> " + ctx.shadowColor);
console.log("ctx.shadowOffsetX 222 >> " + ctx.shadowOffsetX);
console.log("ctx.shadowOffsetY 222 >> " + ctx.shadowOffsetY);

示例代码效果图

[h2]lineCap

var test = this.$element("7Canvas");
var ctx = test.getContext("2d");
console.log("ctx.lineCap 111 >> " + ctx.lineCap);
ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.moveTo(20, 20);
ctx.lineTo(20, 200);
console.log("ctx.lineCap 222 >> " + ctx.lineCap);
ctx.stroke();

示例代码效果图

[h2]lineJoin

var test = this.$element("8Canvas");
var ctx = test.getContext("2d");
console.log("ctx.lineJoin 111 >> " + ctx.lineJoin);
ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineJoin = "round";
ctx.moveTo(20, 20);
ctx.lineTo(100, 50);
ctx.lineTo(20, 100);
ctx.stroke();
console.log("ctx.lineJoin 222 >> " + ctx.lineJoin);

示例代码效果图

[h2]lineWidth

var ctx = test.getContext("2d");
console.log("ctx.lineWidth 111 >> " + ctx.lineWidth);
ctx.lineWidth = 10;
ctx.strokeRect(20, 20, 80, 100);
console.log("ctx.lineWidth 222 >> " + ctx.lineWidth);

示例代码效果图

[h2]miterLimit

var test = this.$element("10Canvas");
var ctx = test.getContext("2d");
ctx.lineWidth = 10;
console.log("ctx.miterLimit 111 >> " + ctx.miterLimit);
ctx.lineJoin = "miter";
ctx.miterLimit = 5;
ctx.moveTo(20, 20);
ctx.lineTo(50, 27);
ctx.lineTo(20, 34);
ctx.stroke();
console.log("ctx.miterLimit 222 >> " + ctx.miterLimit);

示例代码效果图

[h2]font

var test = this.$element("31Canvas");
var ctx = test.getContext("2d");
console.log("ctx.font 111 >> " + ctx.font);
ctx.font = "40px monospace";
ctx.fillText("Hello World", 10, 50);
console.log("ctx.font 222 >> " + ctx.font);

示例代码效果图

[h2]textAlign

var test = this.$element("32Canvas");
var ctx = test.getContext("2d");
// 在位置 150 创建蓝线
ctx.strokeStyle = "blue";
ctx.moveTo(150, 20);
ctx.lineTo(150, 170);
ctx.stroke();
ctx.font = "15px monospace";
console.log("ctx.textAlign 111 >> " + ctx.textAlign);
// 显示不同的 textAlign 值
ctx.textAlign = "start";
console.log("ctx.textAlign 222 >> " + ctx.textAlign);
ctx.fillText("textAlign=start", 150, 60);
ctx.textAlign = "end";
console.log("ctx.textAlign 333 >> " + ctx.textAlign);
ctx.fillText("textAlign=end", 150, 80);
ctx.textAlign = "left";
console.log("ctx.textAlign 444 >> " + ctx.textAlign);
ctx.fillText("textAlign=left", 150, 100);
ctx.textAlign = "center";
console.log("ctx.textAlign 555 >> " + ctx.textAlign);
ctx.fillText("textAlign=center", 150, 120);
ctx.textAlign = "right";
console.log("ctx.textAlign 666 >> " + ctx.textAlign);
ctx.fillText("textAlign=right", 150, 140);

示例代码效果图

[h2]textBaseline

var test = this.$element("33Canvas");
var ctx = test.getContext("2d");
//在位置 y=100 绘制蓝色线条
ctx.strokeStyle = "blue";
ctx.moveTo(5, 100);
ctx.lineTo(395, 100);
ctx.stroke();
ctx.font = "20px monospace"
console.log("ctx.textBaseline 111 >> " + ctx.textBaseline);
//在 y=200 以不同的 textBaseline 值放置每个单词
ctx.textBaseline = "top";
ctx.fillText("Top", 5, 100);
console.log("ctx.textBaseline 222 >> " + ctx.textBaseline);
ctx.textBaseline = "bottom";
ctx.fillText("Bottom", 50, 100);
console.log("ctx.textBaseline 333 >> " + ctx.textBaseline);
ctx.textBaseline = "middle";
ctx.fillText("Middle", 120, 100);
console.log("ctx.textBaseline 444 >> " + ctx.textBaseline);
ctx.textBaseline = "alphabetic";
ctx.fillText("Alphabetic", 190, 100);
console.log("ctx.textBaseline 555 >> " + ctx.textBaseline);
ctx.textBaseline = "hanging";
ctx.fillText("Hanging", 290, 100);
console.log("ctx.textBaseline 666 >> " + ctx.textBaseline);
ctx.textBaseline = "ideographic";
ctx.fillText("ideographic", 350, 100);
console.log("ctx.textBaseline 777 >> " + ctx.textBaseline);

示例代码效果图

[h2]globalAlpha

var test = this.$element("40Canvas");
var ctx = test.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
console.log("ctx.globalAlpha 111 >> " + ctx.globalAlpha);
// 调节透明度
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
console.log("ctx.globalAlpha 222 >> " + ctx.globalAlpha);

示例代码效果图

[h2]globalCompositeOperation

var test = this.$element("41Canvas");
var ctx = test.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
console.log("ctx.globalCompositeOperation 111 >> " + ctx.globalCompositeOperation);
ctx.globalCompositeOperation = "xor";
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
console.log("ctx.globalCompositeOperation 222 >> " + ctx.globalCompositeOperation);

示例代码效果图

接口定义

[h2]getContext()

描述

返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

参数

[h2]toTempFilePath()（1050+）

描述

把当前画布指定区域的内容导出生成指定大小的图片。

调用此接口前，请先调用getcontext()判断画布上内容是否为空，如果为空，则调用toTempFilePath()将无效。

参数

success回调函数参数：

示例代码

this.message = "drawfillStyleforcreatePattern";
var test = this.$element("45Canvas");
var ctx = test.getContext("2d");
console.log("ctx.fillStyle 555 >> " + ctx.fillStyle);
var img = new Image();
img.src = "https://www.huawei.com/Assets/CBG/img/logo.png";
img.onload = () => {
    console.log("Image load success.");
    var pat = ctx.createPattern(img, "repeat");
    ctx.rect(0, 0, 500, 200);
    ctx.fillStyle = pat;
    console.log("ctx.fillStyle 666 >> " + ctx.fillStyle);
    ctx.fill();
    test.toTempFilePath({
        x: 0,
        y: 0,
        width: 500,
        height: 200,
        destWidth: 500,
        destHeight: 200,
        fileType:"png",
        quality:1.0,
        success: (data) => {
            this.imageSrc = data.uri;
            console.log(`Canvas toTempFilePath success ${data.uri}`)
            console.log(`Canvas toTempFilePath success ${data.tempFilePath}`)
        },
        fail: (data) => {
            console.log('Canvas toTempFilePath data ='+data);
        },
        complete: () => {
            console.log('Canvas toTempFilePath complete.');
        }
    })
}
img.onerror = function () {
    console.log("Image load fail.");
},

导出生成的图片

[h2]createLinearGradient()

描述

创建一个线性的渐变颜色。

需要使用addColorStop()来指定渐变点，至少要两个渐变点。

参数

返回值

[h2]gradient.addColorStop()

描述

创建一个颜色的渐变点。

参数

[h2]createRadialGradient()

描述

创建一个圆形的渐变颜色。

起点在圆心，终点在圆环。需要使用addColorStop()来指定渐变点，至少要两个渐变点。

参数

返回值

示例代码

var test = this.$element("42Canvas");
var ctx = test.getContext("2d");
var grd = ctx.createRadialGradient(100, 50, 80);
grd.addColorStop(0, "red");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "blue");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 200, 200);

示例代码效果图

rect()

[h2]rect()

描述

创建一个矩形。

用fill()或者stroke()方法将矩形真正的画到 canvas 中。

参数

示例代码

var test = this.$element("11Canvas");
var ctx = test.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.stroke();

示例代码效果图

[h2]fillRect()

描述

填充一个矩形。

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

参数

示例代码

var test = this.$element("12Canvas");
var ctx = test.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

示例代码效果图

[h2]strokeRect()

描述

画一个矩形（非填充）。

用strokeStyle设置矩形线条的颜色，如果没设置默认是黑色。

参数

示例代码

var test = this.$element("13Canvas");
var ctx = test.getContext("2d");
ctx.strokeRect(20, 20, 150, 100);

示例代码效果图

[h2]clearRect()

描述

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

如果需要清除所有画布，建议清除的范围大于等于画布的大小。canvas接口会保存绘制命令，清除画布会清除绘制的命令，可以减少内存的占用。

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

参数

示例代码

var test = this.$element("14Canvas");
var ctx = test.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 150);
ctx.clearRect(20, 20, 100, 50);

示例代码效果图

[h2]fill()

描述

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

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

示例代码

var test = this.$element("15Canvas");
var ctx = test.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "green";
ctx.fill();

示例代码效果图

[h2]stroke()

描述

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

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

示例代码

var test = this.$element("16Canvas");
var ctx = test.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.strokeStyle = "green";
ctx.stroke();

示例代码效果图

[h2]beginPath()

描述

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

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

示例代码

var test = this.$element("17Canvas");
var ctx = test.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "red"; // 红色路径
ctx.moveTo(0, 75);
ctx.lineTo(250, 75);
ctx.stroke(); // 进行绘制
ctx.beginPath();
ctx.strokeStyle = "blue"; // 蓝色路径
ctx.moveTo(50, 0);
ctx.lineTo(150, 130);
ctx.stroke();

示例代码效果图

[h2]closePath()

描述

关闭一个路径。

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

示例代码

var test = this.$element("19Canvas");
var ctx = test.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();

示例代码效果图

[h2]moveTo()

描述

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

用 stroke() 方法来画线条。

参数

示例代码

var test = this.$element("18Canvas");
var ctx = test.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.stroke();

示例代码效果图

[h2]lineTo()

描述

增加一个新点，然后创建一条从上次指定点到目标点的线。

用 stroke() 方法来画线条。

参数

[h2]arc()

描述

画一条弧线。

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

参数

示例代码

var test = this.$element("24Canvas");
var ctx = test.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

示例代码效果图

[h2]bezierCurveTo()

描述

创建三次方贝塞尔曲线路径。

曲线的起始点为路径中前一个点。

参数

示例代码

var test = this.$element("23Canvas");
var ctx = test.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();

示例代码效果图

[h2]quadraticCurveTo()

描述

创建二次贝塞尔曲线路径。

曲线的起始点为路径中前一个点。

参数

示例代码

var test = this.$element("22Canvas");
var ctx = test.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.stroke();

示例代码效果图

[h2]scale()

描述

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

参数

示例代码

var test = this.$element("26Canvas");
var ctx = test.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);

示例代码效果图

[h2]rotate()

描述

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

参数

示例代码

var test = this.$element("27Canvas");
var ctx = test.getContext("2d");
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50, 20, 100, 50);

示例代码效果图

[h2]translate()

描述

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

参数

示例代码

var test = this.$element("28Canvas");
var ctx = test.getContext("2d");
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillRect(10, 10, 100, 50);

示例代码效果图

[h2]clip()

描述

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

示例代码

var test = this.$element("21Canvas");
var ctx = test.getContext("2d");
ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.clip();
// 在 clip() 之后绘制绿色矩形
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 150, 100);

示例代码效果图

[h2]fillText()

描述

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

参数

示例代码

var test = this.$element("34Canvas");
var ctx = test.getContext("2d");
ctx.font = "20px monospace";
ctx.fillText("Hello World!", 10, 50);
ctx.font = "30px monospace";
// 创建渐变
var gradient = ctx.createLinearGradient(0, 0, 170, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// 用渐变填色
ctx.fillStyle = gradient;
ctx.fillText("w3school.com.cn", 10, 90);

示例代码效果图

[h2]drawImage()

描述

drawImage(image, dx, dy)

drawImage(image, dx, dy, dWidth, dHeight)

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)绘制图像。

参数

示例代码

var test = this.$element("37Canvas");
var ctx = test.getContext("2d");
var img = this.$element("image");
ctx.drawImage(img, 10, 10, 20, 20, 10, 10, 60, 60);

示例代码效果图

[h2]save()

描述

保存当前的绘图上下文。

[h2]restore()

描述

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

[h2]createPattern()

描述

指定的方向内重复指定的元素。

参数

示例代码

var test = this.$element("3Canvas");
var ctx = test.getContext("2d");
var img = this.$element("image");
console.log("ctx.fillStyle 555 >> " + ctx.fillStyle);
var pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 500, 200);
ctx.fillStyle = pat;
console.log("ctx.fillStyle 666 >> " + ctx.fillStyle);
ctx.fill();

示例代码效果图

[h2]arcTo()

描述

画布上创建介于两个切线之间的弧/曲线。

参数

请使用 stroke() 方法在画布上绘制确切的弧。

示例代码

var test = this.$element("25Canvas");
var ctx = test.getContext("2d");
ctx.beginPath();
ctx.beginPath();
ctx.moveTo(20, 20); // 创建开始点
ctx.lineTo(100, 20); // 创建水平线
ctx.arcTo(150, 20, 150, 70, 50); // 创建弧
ctx.lineTo(150, 120); // 创建垂直线
ctx.stroke();

示例代码效果图

[h2]transform()

描述

替换当前的变换矩阵。

参数

该变换只会影响 transform() 方法调用之后的绘图。

示例代码

this.message = "drawtransform";
var test = this.$element("29Canvas");
var ctx = test.getContext("2d");
ctx.fillStyle = "#FFFF00";
ctx.fillRect(0, 0, 250, 100)
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);

示例代码效果图

[h2]setTransform()

描述

重置并创建新的变换矩阵，再次绘制矩形

参数

示例代码

var ctx = test.getContext("2d");
ctx.fillStyle = "#FFFF00";
ctx.fillRect(0, 0, 250, 100)
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);

示例代码效果图

[h2]measureText()

描述

返回包含一个对象，该对象包含以像素计的指定字体宽度。

参数

返回值

示例代码

var test = this.$element("36Canvas");
var ctx = test.getContext("2d");
ctx.font = "10px monospace";
var txt = "Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50)
ctx.fillText(txt, 10 + ctx.measureText(txt).width, 50);
ctx.font = "20px monospace";
ctx.fillText("width:" + ctx.measureText(txt).width, 10, 100)
ctx.fillText(txt, 12 + ctx.measureText(txt).width, 100);
ctx.font = "30px monospace";
ctx.fillText("width:" + ctx.measureText(txt).width, 10, 150)
ctx.fillText(txt, 38 + ctx.measureText(txt).width, 150);

示例代码效果图

[h2]createImageData()（华为扩展接口，非厂商联盟规范）

描述

创建新的、空白的 ImageData 对象。

参数

返回值

ImageData对象说明：

示例代码

var test = this.$element("38Canvas");
var ctx = test.getContext("2d");
var imgData = ctx.createImageData(100, 100);
for (var i = 0; i < imgData.data.length; i += 4) {
    imgData.data[i + 0] = 255;
    imgData.data[i + 1] = 0;
    imgData.data[i + 2] = 0;
    imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 10, 10);

[h2]getImageData()（华为扩展接口，非厂商联盟规范）

描述

返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据。

参数

返回值

ImageData对象说明：

示例代码

var test = this.$element("39Canvas");
var ctx = test.getContext("2d");
var imageData = ctx.getImageData(0, 0, 100, 50);
for (var i = 0; i < imageData.data.length; i += 4) {
    imageData.data[i + 0] = 255;
    imageData.data[i + 1] = 0;
    imageData.data[i + 2] = 0;
    imageData.data[i + 3] = 255;
}
ctx.putImageData(imageData, 0, 0);

示例代码效果图

[h2]putImageData()（华为扩展接口，非厂商联盟规范）

描述

将图像数据（从指定的 ImageData 对象）放回画布上。

参数

[h2]strokeText()

描述

在画布上绘制文本（没有填充色）。

参数

示例代码

var test = this.$element("35Canvas");
var ctx = test.getContext("2d");
ctx.font = "20px monospace";
ctx.strokeText("Hello World!", 10, 50);
ctx.font = "30px monospace";
// 创建渐变
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// 用渐变填色
ctx.strokeStyle = gradient;
ctx.strokeText("w3school.com.cn", 10, 90);

示例代码效果图

[h2]setLineDash()（华为扩展接口，非厂商联盟规范）

描述

设置虚线样式。

参数

示例代码

var canvas = this.$element('43Canvas');
var ctx = canvas.getContext('2d');
ctx.setLineDash([4, 16,100]);
ctx.lineDashOffset = 2;
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(400, 100);
ctx.stroke();

示例代码效果图

[h2]getLineDash()（1035+）

描述

返回一个Array数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组元素会被复制并重复。例如，设置线段为 [5, 15, 25] 将会得到以下返回值 [5, 15, 25, 5, 15, 25]。

Demo

<template>
  <!-- There can only be one root node in the template -->
  <div class="container">
    <text class="text">{{message}}</text>
    <image src="../../Common/logo.png" id="image" style="margin-top:20px;"></image>
    <canvas id="1Canvas" style="background-color:#FFFF00; margin-top:20px;" onlongtap="longtapfun" ontouchmove="touchmove" ontouchstart="touchstart"></canvas>
    <input class="buttons" type="button" onclick="click1" value="drawfillStyleforColor"></input>
    <canvas id="2Canvas" style="background-color:#FFFF00; margin-top:20px; width: 500px; height:200px;" disable-scroll="true" onlongtap="longtapfun" onerror="errorfun"></canvas>
    <input class="buttons" type="button" onclick="click2" value="drawfillStyleforLinearGradient"></input>
    <canvas id="3Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;" onlongtap="longtapfun"></canvas>
    <input class="buttons" type="button" onclick="click3" value="drawfillStyleforcreatePattern"></input>
    <canvas id="4Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;" disable-scroll="true"></canvas>
    <input class="buttons" type="button" onclick="click4" value="drawstrokeStyleforColor"></input>
    <canvas id="5Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click5" value="drawstrokeStyleforLinearGradient"></input>
    <canvas id="6Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click6" value="drawShadow"></input>
    <canvas id="7Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click7" value="drawlineCap"></input>
    <canvas id="8Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click8" value="drawlineJoin"></input>
    <canvas id="9Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click9" value="drawlineWidth"></input>
    <canvas id="10Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click10" value="drawmiterLimit"></input>
    <canvas id="11Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click11" value="drawrect"></input>
    <canvas id="12Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click12" value="drawfillRect"></input>
    <canvas id="13Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click13" value="drawstrokeRect"></input>
    <canvas id="14Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click14" value="drawclearRect"></input>
    <canvas id="15Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click15" value="drawfill"></input>
    <canvas id="16Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click16" value="drawstroke"></input>
    <canvas id="17Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click17" value="drawbeginPath"></input>
    <canvas id="18Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click18" value="drawmoveTo"></input>
    <canvas id="19Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click19" value="drawclosePath"></input>
    <canvas id="20Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click20" value="drawlineTo"></input>
    <canvas id="21Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click21" value="drawclip"></input>
    <canvas id="22Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click22" value="drawquadraticCurveTo"></input>
    <canvas id="23Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click23" value="drawbezierCurveTo"></input>
    <canvas id="24Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click24" value="drawarc"></input>
    <canvas id="25Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click25" value="drawarcTo"></input>
    <canvas id="26Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click26" value="drawscale"></input>
    <canvas id="28Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click28" value="drawtranslate"></input>
    <canvas id="29Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click29" value="drawtransform"></input>
    <canvas id="30Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click30" value="drawsetTransform"></input>
    <canvas id="31Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click31" value="drawfont"></input>
    <canvas id="32Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click32" value="drawtextAlign"></input>
    <canvas id="33Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click33" value="drawtextBaseline"></input>
    <canvas id="34Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click34" value="drawfillText"></input>
    <canvas id="35Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click35" value="drawstrokeText"></input>
    <canvas id="36Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click36" value="drawmeasureText"></input>
    <canvas id="37Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click37" value="drawdrawImage"></input>
    <canvas id="38Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click38" value="drawcreateImageData"></input>
    <canvas id="39Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click39" value="drawgetImageData"></input>
    <canvas id="40Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click40" value="drawglobalAlpha"></input>
    <canvas id="41Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click41" value="drawglobalCompositeOperation"></input>
    <canvas id="27Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click27" value="drawrotate"></input>
    <canvas id="42Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:500px;"></canvas>
    <input class="buttons" type="button" onclick="click42" value="drawRadial"></input>
    <canvas id="43Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click43" value="drawLineDash"></input>
    <canvas id="44Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click44" value="drawImageForNewImage"></input>
    <canvas id="45Canvas" style="background-color:#FFFF00; margin-top:20px;width: 500px; height:200px;"></canvas>
    <input class="buttons" type="button" onclick="click45" value="CreatePatternForNewImage"></input>
    <image src="{{imageSrc}}" id="image2" style="margin-top:20px;"></image>
  </div>
</template>

<style>
  .container {
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
  }

  .title {
    font-size: 100px;
  }

  #1Canvas {
    width: 500px;
    height: 200px;
  }

  .text {
    font-size: 50px;
    color: #0000ff;
    border: 1px;
  }
</style>

<script>
  module.exports = {
    data: {
      title: 'World',
      message: '',
      testparams: '2',
      imageSrc: ''
    },
    onInit() {
      this.$page.setTitleBar({
        text: 'Canvas',
        textColor: '#ffffff',
        backgroundColor: '#007DFF',
        backgroundOpacity: 0.5
      })
    },
    touchstart: function (e) {
      console.log('yyyy' + 'bindtouchstart' + 'e.changedTouches.length =' + e.changedTouches.length)
    },
    touchmove: function (e) {
      console.log('yyyy' + 'bindtouchmove' + ' e.changedTouches.length =' + e.changedTouches.length + e.changedTouches[0].identifier)
    },

    click1: function () {
      this.message = 'drawfillStyleforColor'
      var test = this.$element('1Canvas')
      var ctx = test.getContext('2d')
      console.log('ctx.fillStyle 111  >> ' + ctx.fillStyle)
      ctx.fillStyle = '#0000ff'
      ctx.fillRect(20, 20, 150, 100)
      console.log('ctx.fillStyle 222  >> ' + ctx.fillStyle)
    },
    click2: function () {
      this.message = 'drawfillStyleforLinearGradient'
      var test = this.$element('2Canvas')
      var ctx = test.getContext('2d')
      console.log('ctx.fillStyle 333  >> ' + ctx.fillStyle)
      var myGradient = ctx.createLinearGradient(0, 0, 0, 170)
      console.log('yyyy', 'myGradient =' + myGradient)
      myGradient.addColorStop(0, 'black')
      myGradient.addColorStop(1, 'white')
      ctx.fillStyle = myGradient
      console.log('ctx.fillStyle 444  >> ' + ctx.fillStyle)
      ctx.fillRect(20, 20, 150, 100)
    },
    click3: function () {
      this.message = 'drawfillStyleforcreatePattern'
      var test = this.$element('3Canvas')
      var ctx = test.getContext('2d')
      var img = this.$element('image')
      console.log('ctx.fillStyle 555  >> ' + ctx.fillStyle)
      var pat = ctx.createPattern(img, 'repeat')
      ctx.rect(0, 0, 500, 200)
      ctx.fillStyle = pat
      console.log('ctx.fillStyle 666  >> ' + ctx.fillStyle)
      ctx.fill()
    },
    click4: function () {
      this.message = 'drawstrokeStyleforColor'
      var test = this.$element('4Canvas')
      var ctx = test.getContext('2d')
      console.log('ctx.strokeStyle 111  >> ' + ctx.strokeStyle)
      ctx.strokeStyle = '#0000ff'
      ctx.strokeRect(20, 20, 150, 100)
      console.log('ctx.strokeStyle 222  >> ' + ctx.strokeStyle)
    },
    click5: function () {
      this.message = 'drawstrokeStyleforLinearGradient'
      var test = this.$element('5Canvas')
      var ctx = test.getContext('2d')
      console.log('ctx.strokeStyle 333  >> ' + ctx.strokeStyle)
      var gradient = ctx.createLinearGradient(0, 0, 170, 0)

      gradient.addColorStop('0', 'magenta')
      gradient.addColorStop('0.5', 'blue')
      gradient.addColorStop('1.0', 'red')

      // Fill with gradient
      ctx.strokeStyle = gradient
      ctx.lineWidth = 5
      ctx.strokeRect(20, 20, 150, 100)
      console.log('ctx.strokeStyle 444  >> ' + ctx.strokeStyle)
    },
    click6: function () {
      this.message = 'drawShadow'
      var test = this.$element('6Canvas')
      var ctx = test.getContext('2d')
      ctx.shadowBlur = 20
      ctx.shadowColor = 'black'
      ctx.shadowOffsetX = 20
      ctx.shadowOffsetY = 20
      ctx.fillStyle = 'blue'
      ctx.fillRect(20, 20, 100, 80)
      console.log('ctx.shadowBlur 222  >> ' + ctx.shadowBlur)
      console.log('ctx.shadowColor 222  >> ' + ctx.shadowColor)
      console.log('ctx.shadowOffsetX 222  >> ' + ctx.shadowOffsetX)
      console.log('ctx.shadowOffsetY 222  >> ' + ctx.shadowOffsetY)
    },
    click7: function () {
      this.message = 'drawlineCap'
      var test = this.$element('7Canvas')
      var ctx = test.getContext('2d')
      console.log('ctx.lineCap 111  >> ' + ctx.lineCap)
      ctx.beginPath()
      ctx.lineWidth = 10
      ctx.lineCap = 'round'
      ctx.moveTo(20, 20)
      ctx.lineTo(20, 200)
      console.log('ctx.lineCap 222  >> ' + ctx.lineCap)
      ctx.stroke()
    },
    click8: function () {
      this.message = 'drawlineJoin'
      var test = this.$element('8Canvas')
      var ctx = test.getContext('2d')
      console.log('ctx.lineJoin 111  >> ' + ctx.lineJoin)
      ctx.beginPath()
      ctx.lineWidth = 10
      ctx.lineJoin = 'round'
      ctx.moveTo(20, 20)
      ctx.lineTo(100, 50)
      ctx.lineTo(20, 100)
      ctx.stroke()
      console.log('ctx.lineJoin 222  >> ' + ctx.lineJoin)
    },
    click9: function () {
      this.message = 'drawlineWidth'
      var test = this.$element('9Canvas')
      var ctx = test.getContext('2d')
      console.log('ctx.lineWidth 111  >> ' + ctx.lineWidth)
      ctx.lineWidth = 10
      ctx.strokeRect(20, 20, 80, 100)
      console.log('ctx.lineWidth 222  >> ' + ctx.lineWidth)
    },
    click10: function () {
      this.message = 'drawmiterLimit'
      var test = this.$element('10Canvas')
      var ctx = test.getContext('2d')
      ctx.lineWidth = 10
      console.log('ctx.miterLimit 111  >> ' + ctx.miterLimit)
      ctx.lineJoin = 'miter'
      ctx.miterLimit = 5
      ctx.moveTo(20, 20)
      ctx.lineTo(50, 27)
      ctx.lineTo(20, 34)
      ctx.stroke()
      console.log('ctx.miterLimit 222  >> ' + ctx.miterLimit)
    },
    click11: function () {
      this.message = 'drawrect'
      var test = this.$element('11Canvas')
      var ctx = test.getContext('2d')
      ctx.rect(20, 20, 150, 100)
      ctx.stroke()
    },
    click12: function () {
      this.message = 'drawfillRect'
      var test = this.$element('12Canvas')
      var ctx = test.getContext('2d')
      ctx.fillRect(20, 20, 150, 100)
    },
    click13: function () {
      this.message = 'drawstrokeRect'
      var test = this.$element('13Canvas')
      var ctx = test.getContext('2d')
      ctx.strokeRect(20, 20, 150, 100)
    },
    click14: function () {
      this.message = 'drawclearRect'
      var test = this.$element('14Canvas')
      var ctx = test.getContext('2d')
      ctx.fillStyle = 'red'
      ctx.fillRect(0, 0, 300, 150)
      ctx.clearRect(20, 20, 100, 50)
    },
    click15: function () {
      this.message = 'drawfill'
      var test = this.$element('15Canvas')
      var ctx = test.getContext('2d')
      ctx.rect(20, 20, 150, 100)
      ctx.fillStyle = 'green'
      ctx.fill()
    },
    click16: function () {
      this.message = 'drawstroke'
      var test = this.$element('16Canvas')
      var ctx = test.getContext('2d')
      ctx.beginPath()
      ctx.moveTo(20, 20)
      ctx.lineTo(20, 100)
      ctx.lineTo(70, 100)
      ctx.strokeStyle = 'green'
      ctx.stroke()
    },
    click17: function () {
      this.message = 'drawbeginPath'
      var test = this.$element('17Canvas')
      var ctx = test.getContext('2d')
      ctx.beginPath()
      ctx.lineWidth = '5'
      ctx.strokeStyle = 'red' // red line
      ctx.moveTo(0, 75)
      ctx.lineTo(250, 75)
      ctx.stroke() // Draw

      ctx.beginPath()
      ctx.strokeStyle = 'blue' // blue line
      ctx.moveTo(50, 0)
      ctx.lineTo(150, 130)
      ctx.stroke()
    },
    click18: function () {
      this.message = 'drawmoveTo'
      var test = this.$element('18Canvas')
      var ctx = test.getContext('2d')
      ctx.beginPath()
      ctx.moveTo(0, 0)
      ctx.lineTo(300, 150)
      ctx.stroke()
    },
    click19: function () {
      this.message = 'drawclosePath'
      var test = this.$element('19Canvas')
      var ctx = test.getContext('2d')
      ctx.beginPath()
      ctx.moveTo(20, 20)
      ctx.lineTo(20, 100)
      ctx.lineTo(70, 100)
      ctx.closePath()
      ctx.stroke()
    },
    click20: function () {
      this.message = 'drawlineTo'
      var test = this.$element('20Canvas')
      var ctx = test.getContext('2d')
      ctx.beginPath()
      ctx.moveTo(0, 0)
      ctx.lineTo(300, 150)
      ctx.stroke()
    },
    click21: function () {
      this.message = 'drawclip'
      var test = this.$element('21Canvas')
      var ctx = test.getContext('2d')
      ctx.rect(50, 20, 200, 120)
      ctx.stroke()
      ctx.clip()
      // Draw a green rectangle after clip()
      ctx.fillStyle = 'green'
      ctx.fillRect(0, 0, 150, 100)
    },
    click22: function () {
      this.message = 'drawquadraticCurveTo'
      var test = this.$element('22Canvas')
      var ctx = test.getContext('2d')
      ctx.beginPath()
      ctx.moveTo(20, 20)
      ctx.quadraticCurveTo(20, 100, 200, 20)
      ctx.stroke()
    },
    click23: function () {
      this.message = 'drawbezierCurveTo'
      var test = this.$element('23Canvas')
      var ctx = test.getContext('2d')
      ctx.beginPath()
      ctx.moveTo(20, 20)
      ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)
      ctx.stroke()
    },
    click24: function () {
      this.message = 'drawarc'
      var test = this.$element('24Canvas')
      var ctx = test.getContext('2d')
      ctx.beginPath()
      ctx.arc(100, 75, 50, 0, 2 * Math.PI)
      ctx.stroke()
    },
    click25: function () {
      this.message = 'drawarcTo'
      var test = this.$element('25Canvas')
      var ctx = test.getContext('2d')
      ctx.beginPath()
      ctx.beginPath()
      ctx.moveTo(20, 20) // Create a starting point
      ctx.lineTo(100, 20) // Create horizontal lines
      ctx.arcTo(150, 20, 150, 70, 50) // Create arc
      ctx.lineTo(150, 120) // Create vertical lines
      ctx.stroke()
    },
    click26: function () {
      this.message = 'drawscale'
      var test = this.$element('26Canvas')
      var ctx = test.getContext('2d')
      ctx.strokeRect(5, 5, 25, 15)
      ctx.scale(2, 2)
      ctx.strokeRect(5, 5, 25, 15)
    },
    click27: function () {
      this.message = 'drawrotate'
      var test = this.$element('27Canvas')
      var ctx = test.getContext('2d')
      ctx.rotate(20 * Math.PI / 180)
      ctx.fillRect(50, 20, 100, 50)
    },
    click28: function () {
      this.message = 'drawtranslate'
      var test = this.$element('28Canvas')
      var ctx = test.getContext('2d')
      ctx.fillRect(10, 10, 100, 50)
      ctx.translate(70, 70)
      ctx.fillRect(10, 10, 100, 50)
    },
    click29: function () {
      this.message = 'drawtransform'
      var test = this.$element('29Canvas')
      var ctx = test.getContext('2d')
      ctx.fillStyle = '#FFFF00'
      ctx.fillRect(0, 0, 250, 100)

      ctx.transform(1, 0.5, -0.5, 1, 30, 10)
      ctx.fillStyle = 'red'
      ctx.fillRect(0, 0, 250, 100)

      ctx.transform(1, 0.5, -0.5, 1, 30, 10)
      ctx.fillStyle = 'blue'
      ctx.fillRect(0, 0, 250, 100)
    },
    click30: function () {
      this.message = 'drawsetTransform'
      var test = this.$element('30Canvas')
      var ctx = test.getContext('2d')
      ctx.fillStyle = '#FFFF00'
      ctx.fillRect(0, 0, 250, 100)

      ctx.setTransform(1, 0.5, -0.5, 1, 30, 10)
      ctx.fillStyle = 'red'
      ctx.fillRect(0, 0, 250, 100)

      ctx.setTransform(1, 0.5, -0.5, 1, 30, 10)
      ctx.fillStyle = 'blue'
      ctx.fillRect(0, 0, 250, 100)
    },
    click31: function () {
      this.message = 'drawfont'
      var test = this.$element('31Canvas')
      var ctx = test.getContext('2d')
      console.log('ctx.font 111  >> ' + ctx.font)
      ctx.font = '40px monospace'
      ctx.fillText('Hello World', 10, 50)
      console.log('ctx.font 222  >> ' + ctx.font)
    },
    click32: function () {
      this.message = 'drawtextAlign'
      var test = this.$element('32Canvas')
      var ctx = test.getContext('2d')
      // Create a blue line at location 150
      ctx.strokeStyle = 'blue'
      ctx.moveTo(150, 20)
      ctx.lineTo(150, 170)
      ctx.stroke()

      ctx.font = '15px monospace'
      console.log('ctx.textAlign 111  >> ' + ctx.textAlign)
      // Display different textAlign values
      ctx.textAlign = 'start'
      console.log('ctx.textAlign 222  >> ' + ctx.textAlign)
      ctx.fillText('textAlign=start', 150, 60)
      ctx.textAlign = 'end'
      console.log('ctx.textAlign 333  >> ' + ctx.textAlign)
      ctx.fillText('textAlign=end', 150, 80)
      ctx.textAlign = 'left'
      console.log('ctx.textAlign 444  >> ' + ctx.textAlign)
      ctx.fillText('textAlign=left', 150, 100)
      ctx.textAlign = 'center'
      console.log('ctx.textAlign 555  >> ' + ctx.textAlign)
      ctx.fillText('textAlign=center', 150, 120)
      ctx.textAlign = 'right'
      console.log('ctx.textAlign 666  >> ' + ctx.textAlign)
      ctx.fillText('textAlign=right', 150, 140)
    },
    click33: function () {
      this.message = 'drawtextBaseline'
      var test = this.$element('33Canvas')
      var ctx = test.getContext('2d')
      // Draw blue lines at position y=100
      ctx.strokeStyle = 'blue'
      ctx.moveTo(5, 100)
      ctx.lineTo(395, 100)
      ctx.stroke()

      ctx.font = '20px monospace'
      console.log('ctx.textBaseline 111  >> ' + ctx.textBaseline)
      // Place each word with a different textBaseline value at y=200
      ctx.textBaseline = 'top'
      ctx.fillText('Top', 5, 100)
      console.log('ctx.textBaseline 222  >> ' + ctx.textBaseline)
      ctx.textBaseline = 'bottom'
      ctx.fillText('Bottom', 50, 100)
      console.log('ctx.textBaseline 333  >> ' + ctx.textBaseline)
      ctx.textBaseline = 'middle'
      ctx.fillText('Middle', 120, 100)
      console.log('ctx.textBaseline 444  >> ' + ctx.textBaseline)
      ctx.textBaseline = 'alphabetic'
      ctx.fillText('Alphabetic', 190, 100)
      console.log('ctx.textBaseline 555  >> ' + ctx.textBaseline)
      ctx.textBaseline = 'hanging'
      ctx.fillText('Hanging', 290, 100)
      console.log('ctx.textBaseline 666  >> ' + ctx.textBaseline)
      ctx.textBaseline = 'ideographic'
      ctx.fillText('ideographic', 350, 100)
      console.log('ctx.textBaseline 777  >> ' + ctx.textBaseline)
    },

    click34: function () {
      this.message = 'drawfillText'
      var test = this.$element('34Canvas')
      var ctx = test.getContext('2d')
      ctx.font = '20px monospace'
      ctx.fillText('Hello World!', 10, 50)

      ctx.font = '30px monospace'
      // Create a gradient
      var gradient = ctx.createLinearGradient(0, 0, 170, 0)
      gradient.addColorStop('0', 'magenta')
      gradient.addColorStop('0.5', 'blue')
      gradient.addColorStop('1.0', 'red')
      // Fill with gradient
      ctx.fillStyle = gradient
      ctx.fillText('w3school.com.cn', 10, 90)
    },
    click35: function () {
      var test = this.$element('35Canvas')
      var ctx = test.getContext('2d')
      ctx.font = '20px monospace'
      ctx.strokeText('Hello World!', 10, 50)

      ctx.font = '30px monospace'
      // Create a gradient
      var gradient = ctx.createLinearGradient(0, 0, 200, 0)
      gradient.addColorStop('0', 'magenta')
      gradient.addColorStop('0.5', 'blue')
      gradient.addColorStop('1.0', 'red')
      // Fill with gradient
      ctx.strokeStyle = gradient
      ctx.strokeText('w3school.com.cn', 10, 90)
    },
    click36: function () {
      this.message = 'drawmeasureText'
      var test = this.$element('36Canvas')
      var ctx = test.getContext('2d')
      ctx.font = '10px monospace'
      var txt = 'Hello World'
      ctx.fillText('width:' + ctx.measureText(txt).width, 10, 50)
      ctx.fillText(txt, 10 + ctx.measureText(txt).width, 50)
      ctx.font = '20px monospace'
      ctx.fillText('width:' + ctx.measureText(txt).width, 10, 100)
      ctx.fillText(txt, 12 + ctx.measureText(txt).width, 100)
      ctx.font = '30px monospace'
      ctx.fillText('width:' + ctx.measureText(txt).width, 10, 150)
      ctx.fillText(txt, 38 + ctx.measureText(txt).width, 150)
    },
    click37: function () {
      this.message = 'drawdrawImage'
      var test = this.$element('37Canvas')
      var ctx = test.getContext('2d')
      var img = this.$element('image')
      ctx.drawImage(img, 10, 10, 20, 20, 10, 10, 60, 60)
    },
    click38: function () {
      this.message = 'drawcreateImageData'
      var test = this.$element('38Canvas')
      var ctx = test.getContext('2d')
      var imgData = ctx.createImageData(100, 100)
      for (var i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i + 0] = 255
        imgData.data[i + 1] = 0
        imgData.data[i + 2] = 0
        imgData.data[i + 3] = 255
      }
      ctx.putImageData(imgData, 10, 10)
    },
    click39: function () {
      this.message = 'drawgetImageData'
      var test = this.$element('39Canvas')
      var ctx = test.getContext('2d')
      var imageData = ctx.getImageData(0, 0, 100, 50)
      for (var i = 0; i < imageData.data.length; i += 4) {
        imageData.data[i + 0] = 255
        imageData.data[i + 1] = 0
        imageData.data[i + 2] = 0
        imageData.data[i + 3] = 255
      }
      ctx.putImageData(imageData, 0, 0)
    },
    click40: function () {
      this.message = 'drawglobalAlpha'
      var test = this.$element('40Canvas')
      var ctx = test.getContext('2d')
      ctx.fillStyle = 'red'
      ctx.fillRect(20, 20, 75, 50)
      console.log('ctx.globalAlpha 111  >> ' + ctx.globalAlpha)
      // Adjust transparency
      ctx.globalAlpha = 0.2
      ctx.fillStyle = 'blue'
      ctx.fillRect(50, 50, 75, 50)
      ctx.fillStyle = 'green'
      ctx.fillRect(80, 80, 75, 50)
      console.log('ctx.globalAlpha 222  >> ' + ctx.globalAlpha)
    },
    click41: function () {
      this.message = 'drawglobalCompositeOperation'
      var test = this.$element('41Canvas')
      var ctx = test.getContext('2d')
      ctx.fillStyle = 'red'
      ctx.fillRect(20, 20, 75, 50)
      console.log('ctx.globalCompositeOperation 111  >> ' + ctx.globalCompositeOperation)
      ctx.globalCompositeOperation = 'xor'
      ctx.fillStyle = 'blue'
      ctx.fillRect(50, 50, 75, 50)
      console.log('ctx.globalCompositeOperation 222  >> ' + ctx.globalCompositeOperation)
    },
    click42: function () {
      this.message = 'drawRadial'
      var test = this.$element('42Canvas')
      var ctx = test.getContext('2d')
      var grd = ctx.createRadialGradient(75, 50, 50)
      grd.addColorStop(0, 'red')
      grd.addColorStop(0.5, 'green')
      grd.addColorStop(1, 'blue')

      // Fill with gradient
      ctx.fillStyle = grd
      ctx.fillRect(10, 10, 150, 80)
    },
    click43: function () {
      var canvas = this.$element('43Canvas')
      var ctx = canvas.getContext('2d')
      console.log('lineDash=' + ctx.getLineDash())
      ctx.setLineDash([4, 16, 100])
      ctx.lineDashOffset = 2
      console.log('lineDash=' + ctx.getLineDash())
      ctx.beginPath()
      ctx.moveTo(0, 100)
      ctx.lineTo(400, 100)
      ctx.stroke()
    },
    click44: function () {
      this.message = 'drawdrawImage'
      var test = this.$element('44Canvas')
      var ctx = test.getContext('2d')
      var img = new Image()
      img.src = 'https://developer.huawei.com/dev_index/img/logo_ch.png'
      img.onload = function () {
        console.log('Image load success.')
        ctx.drawImage(img, 10, 10, 20, 20, 10, 10, 60, 60)
      }
      img.onerror = function () {
        console.log('Image load fail.')
      }
    },
    click45: function () {
      this.message = 'drawfillStyleforcreatePattern'
      var test = this.$element('45Canvas')
      var ctx = test.getContext('2d')
      console.log('ctx.fillStyle 555  >> ' + ctx.fillStyle)
      var img = new Image()
      img.src = 'https://developer.huawei.com/dev_index/img/logo_ch.png'
      img.onload = () => {
        console.log('Image load success.')
        var pat = ctx.createPattern(img, 'repeat')
        ctx.rect(0, 0, 500, 200)
        ctx.fillStyle = pat
        console.log('ctx.fillStyle 666  >> ' + ctx.fillStyle)
        ctx.fill()
        test.toTempFilePath({
          x: 0,
          y: 0,
          width: 200,
          height: 200,
          destWidth: 100,
          destHeight: 100,
          fileType: 'png',
          quality: 1.0,
          success: (data) => {
            this.imageSrc = data.uri
            console.log(`Canvas toTempFilePath success ${data.uri}`)
            console.log(`Canvas toTempFilePath success ${data.tempFilePath}`)
          },
          fail: (data) => {
            console.log('Canvas toTempFilePath data =' + data)
          },
          complete: () => {
            console.log('Canvas toTempFilePath complete.')
          }
        })
      }
      img.onerror = function () {
        console.log('Image load fail.')
      }
    },
    errorfun: function () {
      console.log('canvas onerror')
    },
    longtapfun: function () {
      console.log('canvas longtap')
    }
  }
</script>

效果图如下：

版本更新说明

Tips

1. 请勿在onready方法中调用canvas的方法。
2. 如果必须在onshow方法里面调用的话，建议加上settimeOut方法去调用，保证canvas初始化结束。

相关链接

[h2]案例

华为快应用中通过setInterval绘制canvas动画很卡顿