CanvasContext

解释： 绘图上下文。

示例

在开发者工具中预览效果

扫码体验

CanvasContext - 图1请使用百度APP扫码

图片示例

CanvasContext - 图2

CanvasContext - 图3

CanvasContext - 图4

代码示例

  1. <view class="wrap">
  2.     <view class="page-body">
  3.     <view class="page-section">
  4.       <canvas class="canvas-element" canvas-id="canvas"></canvas>
  5.       <scroll-view class="canvas-buttons" scroll-y="true">
  6.         <block s-for="item in methods">
  7.           <button class="canvas-button" bindtap="{{item}}">{{item}}</button>
  8.         </block>
  9.         <button class="canvas-button" bindtap="toTempFilePath" type="primary">toTempFilePath</button>
  10.       </scroll-view>
  11.     </view>
  12.   </view>
  13. </view>
  1. const canvas = require('./canvas.js');
  3. Page({
  4.     data: {
  5.         methods: []
  6.     },
  7.     onReady() {
  8.         this.CanvasContext = swan.createCanvasContext('canvas');
  9.         const methods = Object.keys(canvas);
  10.         this.setData({
  11.             methods
  12.         });
  14.         const that = this;
  15.         methods.forEach(function (method) {
  16.             that[method] = function () {
  17.                 canvas[method](that.CanvasContext);
  18.                 that.CanvasContext.draw();
  19.             }
  20.         })
  21.     },
  22.     toTempFilePath() {
  23.         swan.canvasToTempFilePath({
  24.             canvasId: 'canvas',
  25.             success: res => {
  26.                 console.log('canvasToTempFilePath success', res);
  27.             },
  28.             fail: err => {
  29.                 console.log('canvasToTempFilePath fail', err);
  30.             }
  31.         });
  32.     }
  33. });
  1. .wrap {
  2.     padding-top: 50rpx;
  3. }
  5. .canvas-element-wrapper {
  6.     display: block;
  7.     margin-bottom: 100rpx;
  8. }
  9. .canvas-element {
  10.     width: 100%;
  11.     height: 500rpx;
  12.     background-color: #fff;
  13. }
  14. .canvas-buttons {
  15.     padding: 30rpx 50rpx 10rpx;
  16.     width: 100%;
  17.     height: 360rpx;
  18.     box-sizing: border-box;
  19. }
  20. .canvas-button {
  21.     float: left;
  22.     line-height: 2;
  23.     width: 300rpx;
  24.     margin: 15rpx 12rpx;
  25. }
  • 在 canvas 文件中
  1. const canvas = {};
  3. canvas.rotate = function (context) {
  4.     context.beginPath();
  5.     context.rotate(10 * Math.PI / 180);
  6.     context.rect(225, 75, 20, 10);
  7.     context.fill();
  8. };
  10. canvas.scale = function (context) {
  11.     context.beginPath();
  12.     context.rect(25, 25, 50, 50);
  13.     context.stroke();
  15.     context.scale(2, 2);
  17.     context.beginPath();
  18.     context.rect(25, 25, 50, 50);
  19.     context.stroke();
  20. };
  22. canvas.reset = function (context) {
  23.     context.beginPath();
  25.     context.setFillStyle('#000000');
  26.     context.setStrokeStyle('#000000');
  27.     context.setFontSize(10);
  29.     context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)');
  31.     context.setLineCap('butt');
  32.     context.setLineJoin('miter');
  33.     context.setLineWidth(1);
  34.     context.setMiterLimit(10);
  35. };
  37. canvas.translate = function (context) {
  38.     context.beginPath();
  39.     context.rect(10, 10, 100, 50);
  40.     context.fill();
  42.     context.translate(70, 70);
  44.     context.beginPath();
  45.     context.fill();
  46. };
  48. canvas.save = function (context) {
  49.     context.beginPath();
  50.     context.setStrokeStyle('#00ff00');
  51.     context.save();
  53.     context.scale(2, 2);
  54.     context.setStrokeStyle('#ff0000');
  55.     context.rect(0, 0, 100, 100);
  56.     context.stroke();
  57.     context.restore();
  59.     context.rect(0, 0, 50, 50);
  60.     context.stroke();
  61. };
  63. canvas.restore = function (context) {
  64.     [3, 2, 1].forEach(function (item) {
  65.         context.beginPath();
  66.         context.save();
  67.         context.scale(item, item);
  68.         context.rect(10, 10, 100, 100);
  69.         context.stroke();
  70.         context.restore();
  71.     });
  72. };
  74. canvas.drawImage = function (context) {
  75.     context.drawImage('/images/api_logo.png', 0, 0);
  76. };
  78. canvas.fillText = function (context) {
  79.     context.setStrokeStyle('#ff0000');
  81.     context.beginPath();
  82.     context.moveTo(0, 10);
  83.     context.lineTo(300, 10);
  84.     context.stroke();
  86.     context.setFontSize(10);
  87.     context.fillText('Hello World', 0, 30);
  88.     context.setFontSize(20);
  89.     context.fillText('Hello World', 100, 30);
  91.     context.beginPath();
  92.     context.moveTo(0, 30);
  93.     context.lineTo(300, 30);
  94.     context.stroke();
  95. };
  97. canvas.fill = function (context) {
  98.     context.beginPath();
  99.     context.rect(20, 20, 150, 100);
  100.     context.setStrokeStyle('#00ff00');
  101.     context.fill();
  102. };
  104. canvas.stroke = function (context) {
  105.     context.beginPath();
  106.     context.moveTo(20, 20);
  107.     context.lineTo(20, 100);
  108.     context.lineTo(70, 100);
  109.     context.setStrokeStyle('#00ff00');
  110.     context.stroke();
  111. };
  113. canvas.clearRect = function (context) {
  114.     context.setFillStyle('#ff0000');
  115.     context.beginPath();
  116.     context.rect(0, 0, 300, 150);
  117.     context.fill();
  118.     context.clearRect(20, 20, 100, 50);
  119. };
  121. canvas.beginPath = function (context) {
  122.     context.beginPath();
  123.     context.setLineWidth(5);
  124.     context.setStrokeStyle('#ff0000');
  125.     context.moveTo(0, 75);
  126.     context.lineTo(250, 75);
  127.     context.stroke();
  129.     context.beginPath();
  130.     context.setStrokeStyle('#0000ff');
  131.     context.moveTo(50, 0);
  132.     context.lineTo(150, 130);
  133.     context.stroke();
  134. };
  136. canvas.closePath = function (context) {
  137.     context.beginPath();
  138.     context.moveTo(20, 20);
  139.     context.lineTo(20, 100);
  140.     context.lineTo(70, 100);
  141.     context.closePath();
  142.     context.stroke();
  143. };
  145. canvas.moveTo = function (context) {
  146.     context.beginPath();
  147.     context.moveTo(0, 0);
  148.     context.lineTo(300, 150);
  149.     context.stroke();
  150. };
  152. canvas.lineTo = function (context) {
  153.     context.beginPath();
  154.     context.moveTo(20, 20);
  155.     context.lineTo(20, 100);
  156.     context.lineTo(70, 100);
  157.     context.stroke();
  158. };
  160. canvas.rect = function (context) {
  161.     context.beginPath();
  162.     context.rect(20, 20, 150, 100);
  163.     context.stroke();
  164. };
  166. canvas.arc = function (context) {
  167.     context.beginPath();
  168.     context.arc(75, 75, 50, 0, Math.PI * 2, true);
  169.     context.moveTo(110, 75);
  170.     context.arc(75, 75, 35, 0, Math.PI, false);
  171.     context.moveTo(65, 65);
  172.     context.arc(60, 65, 5, 0, Math.PI * 2, true);
  173.     context.moveTo(95, 65);
  174.     context.arc(90, 65, 5, 0, Math.PI * 2, true);
  175.     context.stroke();
  176. };
  178. canvas.quadraticCurveTo = function (context) {
  179.     context.beginPath();
  180.     context.moveTo(20, 20);
  181.     context.quadraticCurveTo(20, 100, 200, 20);
  182.     context.stroke();
  183. };
  185. canvas.bezierCurveTo = function (context) {
  186.     context.beginPath();
  187.     context.moveTo(20, 20);
  188.     context.bezierCurveTo(20, 100, 200, 100, 200, 20);
  189.     context.stroke();
  190. };
  192. canvas.setFillStyle = function (context) {
  193.     ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
  194.         context.setFillStyle(item);
  195.         context.beginPath();
  196.         context.rect(0 + 75 * index, 0, 50, 50);
  197.         context.fill();
  198.     });
  199. };
  201. canvas.setStrokeStyle = function (context) {
  202.     ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
  203.         context.setStrokeStyle(item);
  204.         context.beginPath();
  205.         context.rect(0 + 75 * index, 0, 50, 50);
  206.         context.stroke();
  207.     });
  208. };
  210. canvas.setGlobalAlpha = function (context) {
  211.     context.setFillStyle('#000000');
  212.     [1, 0.5, 0.1].forEach(function (item, index) {
  213.         context.setGlobalAlpha(item);
  214.         context.beginPath();
  215.         context.rect(0 + 75 * index, 0, 50, 50);
  216.         context.fill();
  217.     });
  218. };
  220. canvas.setShadow = function (context) {
  221.     context.beginPath();
  222.     context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)');
  223.     context.rect(10, 10, 100, 100);
  224.     context.fill();
  225. };
  227. canvas.setFontSize = function (context) {
  228.     [10, 20, 30, 40].forEach(function (item, index) {
  229.         context.setFontSize(item);
  230.         context.fillText('Hello, world', 20, 20 + 40 * index);
  231.     });
  232. };
  234. canvas.setLineCap = function (context) {
  235.     context.setLineWidth(10);
  236.     ['butt', 'round', 'square'].forEach(function (item, index) {
  237.         context.beginPath();
  238.         context.setLineCap(item);
  239.         context.moveTo(20, 20 + 20 * index);
  240.         context.lineTo(100, 20 + 20 * index);
  241.         context.stroke();
  242.     });
  243. };
  245. canvas.setLineJoin = function (context) {
  246.     context.setLineWidth(10);
  247.     ['bevel', 'round', 'miter'].forEach(function (item, index) {
  248.         context.beginPath();
  250.         context.setLineJoin(item);
  251.         context.moveTo(20 + 80 * index, 20);
  252.         context.lineTo(100 + 80 * index, 50);
  253.         context.lineTo(20 + 80 * index, 100);
  254.         context.stroke();
  255.     });
  256. };
  258. canvas.setLineWidth = function (context) {
  259.     [2, 4, 6, 8, 10].forEach(function (item, index) {
  260.         context.beginPath();
  261.         context.setLineWidth(item);
  262.         context.moveTo(20, 20 + 20 * index);
  263.         context.lineTo(100, 20 + 20 * index);
  264.         context.stroke();
  265.     });
  266. };
  268. canvas.setMiterLimit = function (context) {
  269.     context.setLineWidth(4);;
  271.     [2, 4, 6, 8, 10].forEach(function (item, index) {
  272.         context.beginPath();
  273.         context.setMiterLimit(item);
  274.         context.moveTo(20 + 80 * index, 20);
  275.         context.lineTo(100 + 80 * index, 50);
  276.         context.lineTo(20 + 80 * index, 100);
  277.         context.stroke();
  278.     });
  279. };
  281. module.exports = canvas;