百度智能小程序绘图上下文

2020-09-05 14:21 更新

CanvasContext

解释：绘图上下文。

方法列表

方法	说明
CanvasContext.arc	画一条弧线
CanvasContext.beginPath	开始创建一个路径
CanvasContext.bezierCurveTo	创建三次方贝塞尔曲线路径
CanvasContext.clearRect	清除画布上在该矩形区域内的内容
CanvasContext.clip	clip 方法从原始画布中剪切任意形状和尺寸
CanvasContext.closePath	关闭一个路径
CanvasContext.createCircularGradient	创建一个圆形的渐变颜色
CanvasContext.createLinearGradient	创建一个线性的渐变颜色
CanvasContext.draw	将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中
CanvasContext.drawImage	绘制图像到画布
CanvasContext.fill	对当前路径中的内容进行填充
CanvasContext.fillRect	填充一个矩形
CanvasContext.fillText	在画布上绘制被填充的文本
CanvasContext.font	设置当前字体样式的属性
CanvasContext.lineTo	lineTo 方法增加一个新点
CanvasContext.measureText	测量文本尺寸信息
CanvasContext.moveTo	把路径移动到画布中的指定点
CanvasContext.quadraticCurveTo	创建二次贝塞尔曲线路径
CanvasContext.rect	创建一个矩形
CanvasContext.restore	恢复之前保存的绘图上下文
CanvasContext.rotate	以原点为中心
CanvasContext.save	保存当前的绘图上下文
CanvasContext.scale	横纵坐标缩放
CanvasContext.setFillStyle	设置填充色
CanvasContext.setFontSize	设置字体的字号
CanvasContext.setGlobalAlpha	设置全局画笔透明度
CanvasContext.setLineCap	设置线条的端点样式
CanvasContext.setLineDash	设置线条虚线样式的间距和长度
CanvasContext.setLineDashOffset	设置虚线偏移量的属性
CanvasContext.setLineJoin	设置线条的交点样式
CanvasContext.setLineWidth	设置线条的宽度
CanvasContext.setMiterLimit	设置最大斜接长度
CanvasContext.setShadow	设置阴影样式
CanvasContext.setStrokeStyle	设置边框颜色
CanvasContext.setTextAlign	用于设置文字的对齐
CanvasContext.setTextBaseline	用于设置文字的水平对齐
CanvasContext.setTransform	使用矩阵重新设置（覆盖）当前变换的方法
CanvasContext.stroke	画出当前路径的边框
CanvasContext.strokeRect	画一个矩形（非填充）
CanvasContext.strokeText	给定的 (x, y) 位置绘制文本描边的方法
CanvasContext.translate	对当前坐标系的原点 (0, 0) 进行变换

示例

在开发者工具中打开

图片示例

代码示例

<view class="wrap"> 
    <view class="card-area">
        <canvas canvas-id="canvas"></canvas>
    </view>
    <view class="card-area flexBottom swan-security-padding-bottom" style="height:{{isIPhoneX ? 5.4 : 4.1}}rem">
        <view class="top-description border-bottom">展示绘图</view>
        <scroll-view scroll-y class="scroll">
            <button s-for="item in methods" class="canvas-button" type="primary" bindtap="{{item}}">{{item}}</button>
            <button bindtap="toTempFilePath" type="primary">toTempFilePath</button>
        </scroll-view>
    </view>
</view>

const canvas = require('./canvas.js');

Page({
    data: {
        methods: [],
        isIPhoneX: false
    },
    onReady() {
        this.canvasContext = swan.createCanvasContext('canvas');
        const methods = Object.keys(canvas);
        this.setData({
            methods
        });

        const that = this;
        methods.forEach(function (method) {
            that[method] = function () {
                canvas[method](that.canvasContext);
                that.canvasContext.draw();
            };
        });

        swan.getSystemInfo({
            success: systemInfo => {
                console.log('systemInfo', systemInfo);
                // 针对适配某一机型和模拟器
                if (systemInfo.model
                    && (systemInfo.model.indexOf('iPhone X') > -1)
                    || (systemInfo.model === 'iPhone Simulator <x86-64>'
                    && systemInfo.screenWidth === 375)
                ) {
                    this.setData({
                        isIPhoneX: true
                    });
                }
            }
        });
    },
    toTempFilePath() {
        swan.canvasToTempFilePath({
            canvasId: 'canvas',
            success: res => {
                swan.showToast({
                    title: res.tempFilePath,
                    icon: 'none'
                });
                console.log('canvasToTempFilePath success', res);
            },
            fail: err => {
                console.log('canvasToTempFilePath fail', err);
            }
        });
    }
});

swan-canvas {
    height: 2.3rem;
    width: 3.88rem;
}

.scroll {
    height: 4.3rem;
}

.flexTop {
    position: fixed;
    top: 1.1rem;
    height: 2.18rem;
}

.flexBottom {
    position: fixed;
    bottom: 0;
    width: 3.88rem;
}
.card-area {
    margin: .13rem .13rem 0 .13rem;
}

在 canvas 文件中

const canvas = {};

canvas.arc = function (context) {
    context.beginPath();
    context.arc(100, 75, 50, 0, 2 * Math.PI);
    context.setFillStyle('blue');
    context.fill();
    context.draw();
};

canvas.beginPath = function (context) {
    context.beginPath();
    context.setLineWidth(5);
    context.setStrokeStyle('#ff0000');
    context.moveTo(0, 75);
    context.lineTo(250, 75);
    context.stroke();

    context.beginPath();
    context.setStrokeStyle('#0000ff');
    context.moveTo(50, 0);
    context.lineTo(150, 130);
    context.stroke();
};

canvas.bezierCurveTo = function (context) {
    context.beginPath();
    context.moveTo(20, 20);
    context.bezierCurveTo(20, 100, 200, 100, 200, 20);
    context.setStrokeStyle('black');
    context.stroke();
};

canvas.clearRect = function (context) {
    context.setFillStyle('blue');
    context.fillRect(0, 0, 250, 150);
    context.clearRect(20, 20, 150, 75);
    context.draw();
};

canvas.clip = function (context) {
    context.beginPath();
    context.rect(50, 20, 200, 120);
    context.stroke();
    context.clip();
    context.fillRect(0, 0, 150, 100);
};

canvas.closePath = function (context) {
    context.beginPath();
    context.moveTo(20, 20);
    context.lineTo(20, 100);
    context.lineTo(70, 100);
    context.closePath();
    context.stroke();
};

canvas.createCircularGradient = function (context) {
    // Create circular gradient
    const grd = context.createCircularGradient(75, 50, 50);
    grd.addColorStop(0, 'red');
    grd.addColorStop(1, 'blue');

    // Fill with gradient
    context.setFillStyle(grd);
    context.fillRect(30, 30, 150, 80);
};

canvas.createLinearGradient = function (context) {
    const grd = context.createLinearGradient(0, 0, 200, 0);
    grd.addColorStop(0, 'blue');
    grd.addColorStop(1, 'red');

    // Fill with gradient
    context.setFillStyle(grd);
    context.fillRect(30, 30, 150, 80);
};

canvas.drawImage = function (context) {
    context.drawImage('https://b.bdstatic.com/searchbox/icms/searchbox/img/api_logo.png', 0, 0);
};

canvas.fill = function (context) {
    context.beginPath();
    context.moveTo(100, 100);
    context.lineTo(10, 100);
    context.lineTo(10, 10);
    context.fill();
};

canvas.fillRect = function (context) {
    context.beginPath();
    context.setFillStyle('blue');
    context.fillRect(30, 30, 150, 75);
};

canvas.fillText = function (context) {
    context.setFontSize(20);
    context.fillText('Hello', 20, 20);
    context.fillText('World', 100, 100);
};

canvas.font = function (context) {
    context.font = '50px oblique bold Microsoft YaiHei';
    context.fillText('微软雅黑', 90, 90);
    context.font = '50px 楷体';
    context.fillText('楷体', 90, 200);
};

canvas.lineTo = function (context) {
    context.beginPath();
    context.moveTo(10, 10);
    context.rect(10, 10, 100, 50);
    context.lineTo(110, 60);
    context.stroke();
};

canvas.moveTo = function (context) {
    context.moveTo(10, 10);
    context.lineTo(100, 10);
    context.moveTo(10, 100);
    context.lineTo(100, 100);
    context.stroke();
};

canvas.quadraticCurveTo = function (context) {
    context.beginPath();
    context.moveTo(20, 20);
    context.quadraticCurveTo(20, 100, 200, 20);
    context.stroke();
};


canvas.rect = function (context) {
    context.beginPath();
    context.rect(30, 30, 150, 75);
    context.stroke();
};

canvas.rotate = function (context) {
    context.beginPath();
    context.strokeRect(100, 10, 150, 100);
    context.rotate(10 * Math.PI / 180);
    context.strokeRect(100, 10, 150, 100);
    context.rotate(10 * Math.PI / 180);
    context.strokeRect(100, 10, 150, 100);
    context.fill();
};

canvas.saveAndRestore = function (context) {
    context.beginPath();
    context.setFillStyle('red');
    context.save();

    context.setFillStyle('blue');
    context.fillRect(10, 10, 150, 100);
    context.restore();

    context.fillRect(50, 50, 150, 100);
    context.stroke();
};

canvas.scale = function (context) {
    context.beginPath();
    context.rect(10, 10, 25, 15);
    context.stroke();

    context.scale(2, 2);

    context.beginPath();
    context.rect(10, 10, 25, 15);
    context.stroke();

    context.scale(2, 2);

    context.beginPath();
    context.rect(10, 10, 25, 15);
    context.stroke();
};

canvas.setFillStyle = function (context) {
    ['blue', '#ffff00', 'rgba(255,255,0, 0.3)'].forEach(function (item, index) {
        context.setFillStyle(item);
        context.beginPath();
        context.rect(0 + 75 * index, 0, 50, 50);
        context.fill();
    });
};

canvas.setFontSize = function (context) {
    context.setFontSize(20);
    context.fillText('20', 20, 20);
    context.setFontSize(30);
    context.fillText('30', 40, 40);
    context.setFontSize(40);
    context.fillText('40', 60, 60);
    context.setFontSize(50);
    context.fillText('50', 90, 90);
};

canvas.setGlobalAlpha = function (context) {
    context.setFillStyle('red');
    context.fillRect(10, 10, 150, 100);
    context.setGlobalAlpha(0.2);
    context.setFillStyle('blue');
    context.fillRect(50, 50, 150, 100);
    context.setFillStyle('yellow');
    context.fillRect(100, 100, 150, 100);
    context.draw();
};

canvas.setLineCap = function (context) {
    context.beginPath();
    context.moveTo(20, 10);
    context.lineTo(200, 10);
    context.stroke();
    ['butt', 'round', 'square'].forEach(function (item, index) {
        context.beginPath();
        context.setLineCap(item);
        context.setLineWidth(10);
        context.moveTo(20 + 20 * index, 20 + 20 * index);
        context.lineTo(200, 20 + 20 * index);
        context.stroke();
    });
};

canvas.setLineDash = function (context) {
    context.setLineDash([10, 20], 5);
    context.beginPath();
    context.moveTo(0, 100);
    context.lineTo(400, 100);
    context.stroke();
};

canvas.setLineJoin = function (context) {
    context.beginPath();
    context.moveTo(10, 10);
    context.lineTo(90, 50);
    context.lineTo(10, 90);
    context.stroke();
    ['bevel', 'round', 'miter'].forEach(function (item, index) {
        context.beginPath();
        context.setLineJoin(item);
        context.setLineWidth(10);
        context.moveTo(30 + 80 * index, 10);
        context.lineTo(120 + 80 * index, 50);
        context.lineTo(30 + 80 * index, 90);
        context.stroke();
    });
};

canvas.setLineWidth = function (context) {
    [1, 5, 10, 15].forEach(function (item, index) {
        context.beginPath();
        context.setLineWidth(item);
        context.moveTo(20 + 10 * index, 20 + 20 * index);
        context.lineTo(100, 20 + 20 * index);
        context.stroke();
    });
};

canvas.setMiterLimit = function (context) {
    [1, 2, 3, 4].forEach(function (item, index) {
        context.beginPath();
        context.setMiterLimit(item);
        context.setLineWidth(10);
        context.setLineJoin('miter');
        context.moveTo(50 + 40 * index, 10);
        context.lineTo(140 + 40 * index, 50);
        context.lineTo(50 + 40 * index, 90);
        context.stroke();
    });
};

canvas.setShadow = function (context) {
    context.beginPath();
    context.setFillStyle('blue');
    context.setShadow(15, 15, 15, 'red');
    context.rect(30, 30, 150, 75);
    context.fill();
};

canvas.setStrokeStyle = function (context) {
    context.setStrokeStyle('blue');
    context.strokeRect(30, 30, 150, 75);
};

canvas.setTextAlign = function (context) {
    context.setStrokeStyle('red');
    context.moveTo(150, 20);
    context.lineTo(150, 170);
    context.stroke();

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

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

    context.setTextAlign('right');
    context.fillText('textAlign=right', 150, 100);
};

canvas.setTextBaseline = function (context) {
    context.setStrokeStyle('red');
    context.moveTo(5, 75);
    context.lineTo(295, 75);
    context.stroke();

    context.setFontSize(20);

    context.setTextBaseline('top');
    context.fillText('top', 5, 75);

    context.setTextBaseline('middle');
    context.fillText('middle', 50, 75);

    context.setTextBaseline('bottom');
    context.fillText('bottom', 120, 75);

    context.setTextBaseline('normal');
    context.fillText('normal', 200, 75);
};

canvas.setTransform = function (context) {
    context.setFillStyle('blue');
    context.fillRect(30, 30, 150, 75);
    context.setTransform(1, 0.5, -0.5, 1, 30, 10);
    context.setFillStyle('red');
    context.fillRect(30, 30, 150, 75);
    context.setTransform(1, 0.5, -0.5, 1, 30, 10);
};

canvas.stroke = function (context) {
    context.beginPath();
    context.moveTo(100, 100);
    context.lineTo(10, 100);
    context.lineTo(10, 10);
    context.stroke();
};

canvas.strokeRect = function (context) {
    context.setStrokeStyle('blue');
    context.strokeRect(30, 30, 150, 75);
};

canvas.translate = function (context) {
    context.strokeRect(10, 10, 150, 100);
    context.translate(20, 20);
    context.strokeRect(10, 10, 150, 100);
    context.translate(20, 20);
    context.strokeRect(10, 10, 150, 100);
};

canvas.addColorStop = function (context) {
    const grd = context.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');

    context.setFillStyle(grd);
    context.fillRect(30, 30, 150, 80);
};

canvas.reset = function (context) {
    context.beginPath();

    context.setFillStyle('#000000');
    context.setStrokeStyle('#000000');
    context.setFontSize(10);

    context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)');

    context.setLineCap('butt');
    context.setLineJoin('miter');
    context.setLineWidth(1);
    context.setMiterLimit(10);
};

module.exports = canvas;

以上内容是否对您有帮助：

百度智能小程序 绘图上下文

CanvasContext

方法列表

示例

图片示例

代码示例

百度智能小程序绘图上下文