CanvasContext

解释： 绘图上下文。

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

图片示例

代码示例

  1. <view class="wrap">    <view class="page-body">    <view class="page-section">      <canvas class="canvas-element" canvas-id="canvas"></canvas>      <scroll-view class="canvas-buttons" scroll-y="true">        <block s-for="item in methods">          <button class="canvas-button" bindtap="{{item}}">{{item}}</button>        </block>        <button class="canvas-button" bindtap="toTempFilePath" type="primary">toTempFilePath</button>      </scroll-view>    </view>  </view></view>
  1. const canvas = require('./canvas.js');Page({    data: {        methods: []    },    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();            }        })    },    toTempFilePath() {        swan.canvasToTempFilePath({            canvasId: 'canvas',            success: res => {                console.log('canvasToTempFilePath success', res);            },            fail: err => {                console.log('canvasToTempFilePath fail', err);            }        });    }});
  1. .wrap {    padding-top: 50rpx;}.canvas-element-wrapper {    display: block;    margin-bottom: 100rpx;}.canvas-element {    width: 100%;    height: 500rpx;    background-color: #fff;}.canvas-buttons {    padding: 30rpx 50rpx 10rpx;    width: 100%;    height: 360rpx;    box-sizing: border-box;}.canvas-button {    float: left;    line-height: 2;    width: 300rpx;    margin: 15rpx 12rpx;}

-

  1. const canvas = {};canvas.rotate = function (context) {    context.beginPath();    context.rotate(10 * Math.PI / 180);    context.rect(225, 75, 20, 10);    context.fill();};canvas.scale = function (context) {    context.beginPath();    context.rect(25, 25, 50, 50);    context.stroke();    context.scale(2, 2);    context.beginPath();    context.rect(25, 25, 50, 50);    context.stroke();};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);};canvas.translate = function (context) {    context.beginPath();    context.rect(10, 10, 100, 50);    context.fill();    context.translate(70, 70);    context.beginPath();    context.fill();};canvas.save = function (context) {    context.beginPath();    context.setStrokeStyle('#00ff00');    context.save();    context.scale(2, 2);    context.setStrokeStyle('#ff0000');    context.rect(0, 0, 100, 100);    context.stroke();    context.restore();    context.rect(0, 0, 50, 50);    context.stroke();};canvas.restore = function (context) {    [3, 2, 1].forEach(function (item) {        context.beginPath();        context.save();        context.scale(item, item);        context.rect(10, 10, 100, 100);        context.stroke();        context.restore();    });};canvas.drawImage = function (context) {    context.drawImage('/images/api_logo.png', 0, 0);};canvas.fillText = function (context) {    context.setStrokeStyle('#ff0000');    context.beginPath();    context.moveTo(0, 10);    context.lineTo(300, 10);    context.stroke();    context.setFontSize(10);    context.fillText('Hello World', 0, 30);    context.setFontSize(20);    context.fillText('Hello World', 100, 30);    context.beginPath();    context.moveTo(0, 30);    context.lineTo(300, 30);    context.stroke();};canvas.fill = function (context) {    context.beginPath();    context.rect(20, 20, 150, 100);    context.setStrokeStyle('#00ff00');    context.fill();};canvas.stroke = function (context) {    context.beginPath();    context.moveTo(20, 20);    context.lineTo(20, 100);    context.lineTo(70, 100);    context.setStrokeStyle('#00ff00');    context.stroke();};canvas.clearRect = function (context) {    context.setFillStyle('#ff0000');    context.beginPath();    context.rect(0, 0, 300, 150);    context.fill();    context.clearRect(20, 20, 100, 50);};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.closePath = function (context) {    context.beginPath();    context.moveTo(20, 20);    context.lineTo(20, 100);    context.lineTo(70, 100);    context.closePath();    context.stroke();};canvas.moveTo = function (context) {    context.beginPath();    context.moveTo(0, 0);    context.lineTo(300, 150);    context.stroke();};canvas.lineTo = function (context) {    context.beginPath();    context.moveTo(20, 20);    context.lineTo(20, 100);    context.lineTo(70, 100);    context.stroke();};canvas.rect = function (context) {    context.beginPath();    context.rect(20, 20, 150, 100);    context.stroke();};canvas.arc = function (context) {    context.beginPath();    context.arc(75, 75, 50, 0, Math.PI * 2, true);    context.moveTo(110, 75);    context.arc(75, 75, 35, 0, Math.PI, false);    context.moveTo(65, 65);    context.arc(60, 65, 5, 0, Math.PI * 2, true);    context.moveTo(95, 65);    context.arc(90, 65, 5, 0, Math.PI * 2, true);    context.stroke();};canvas.quadraticCurveTo = function (context) {    context.beginPath();    context.moveTo(20, 20);    context.quadraticCurveTo(20, 100, 200, 20);    context.stroke();};canvas.bezierCurveTo = function (context) {    context.beginPath();    context.moveTo(20, 20);    context.bezierCurveTo(20, 100, 200, 100, 200, 20);    context.stroke();};canvas.setFillStyle = function (context) {    ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {        context.setFillStyle(item);        context.beginPath();        context.rect(0 + 75 * index, 0, 50, 50);        context.fill();    });};canvas.setStrokeStyle = function (context) {    ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {        context.setStrokeStyle(item);        context.beginPath();        context.rect(0 + 75 * index, 0, 50, 50);        context.stroke();    });};canvas.setGlobalAlpha = function (context) {    context.setFillStyle('#000000');    [1, 0.5, 0.1].forEach(function (item, index) {        context.setGlobalAlpha(item);        context.beginPath();        context.rect(0 + 75 * index, 0, 50, 50);        context.fill();    });};canvas.setShadow = function (context) {    context.beginPath();    context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)');    context.rect(10, 10, 100, 100);    context.fill();};canvas.setFontSize = function (context) {    [10, 20, 30, 40].forEach(function (item, index) {        context.setFontSize(item);        context.fillText('Hello, world', 20, 20 + 40 * index);    });};canvas.setLineCap = function (context) {    context.setLineWidth(10);    ['butt', 'round', 'square'].forEach(function (item, index) {        context.beginPath();        context.setLineCap(item);        context.moveTo(20, 20 + 20 * index);        context.lineTo(100, 20 + 20 * index);        context.stroke();    });};canvas.setLineJoin = function (context) {    context.setLineWidth(10);    ['bevel', 'round', 'miter'].forEach(function (item, index) {        context.beginPath();        context.setLineJoin(item);        context.moveTo(20 + 80 * index, 20);        context.lineTo(100 + 80 * index, 50);        context.lineTo(20 + 80 * index, 100);        context.stroke();    });};canvas.setLineWidth = function (context) {    [2, 4, 6, 8, 10].forEach(function (item, index) {        context.beginPath();        context.setLineWidth(item);        context.moveTo(20, 20 + 20 * index);        context.lineTo(100, 20 + 20 * index);        context.stroke();    });};canvas.setMiterLimit = function (context) {    context.setLineWidth(4);;    [2, 4, 6, 8, 10].forEach(function (item, index) {        context.beginPath();        context.setMiterLimit(item);        context.moveTo(20 + 80 * index, 20);        context.lineTo(100 + 80 * index, 50);        context.lineTo(20 + 80 * index, 100);        context.stroke();    });};module.exports = canvas;