CanvasContext

解释： 绘图上下文。

方法参数

无

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

百度智能小程序

请使用百度APP扫码

图片示例

CanvasContext - 图2

代码示例

  • SWAN
  • JS
  • CSS
  1. <view class="wrap"> 
  2.     <view class="card-area">
  3.         <canvas canvas-id="canvas"></canvas>
  4.     </view>
  5.     <view class="card-area flexBottom swan-security-padding-bottom" style="height:{{isIPhoneX ? 5.4 : 4.1}}rem">
  6.         <view class="top-description border-bottom">展示绘图</view>
  7.         <scroll-view scroll-y class="scroll">
  8.             <button s-for="item in methods" class="canvas-button" type="primary" bindtap="{{item}}">{{item}}</button>
  9.             <button bindtap="toTempFilePath" type="primary">toTempFilePath</button>
  10.         </scroll-view>
  11.     </view>
  12. </view>

  • 在 canvas 文件中

  • JS

  1. const canvas = {};
  3. canvas.arc = function (context) {
  4.     context.beginPath();
  5.     context.arc(100, 75, 50, 0, 2 * Math.PI);
  6.     context.setFillStyle('blue');
  7.     context.fill();
  8.     context.draw();
  9. };
  11. canvas.beginPath = function (context) {
  12.     context.beginPath();
  13.     context.setLineWidth(5);
  14.     context.setStrokeStyle('#ff0000');
  15.     context.moveTo(0, 75);
  16.     context.lineTo(250, 75);
  17.     context.stroke();
  19.     context.beginPath();
  20.     context.setStrokeStyle('#0000ff');
  21.     context.moveTo(50, 0);
  22.     context.lineTo(150, 130);
  23.     context.stroke();
  24. };
  26. canvas.bezierCurveTo = function (context) {
  27.     context.beginPath();
  28.     context.moveTo(20, 20);
  29.     context.bezierCurveTo(20, 100, 200, 100, 200, 20);
  30.     context.setStrokeStyle('black');
  31.     context.stroke();
  32. };
  34. canvas.clearRect = function (context) {
  35.     context.setFillStyle('blue');
  36.     context.fillRect(0, 0, 250, 150);
  37.     context.clearRect(20, 20, 150, 75);
  38.     context.draw();
  39. };
  41. canvas.clip = function (context) {
  42.     context.beginPath();
  43.     context.rect(50, 20, 200, 120);
  44.     context.stroke();
  45.     context.clip();
  46.     context.fillRect(0, 0, 150, 100);
  47. };
  49. canvas.closePath = function (context) {
  50.     context.beginPath();
  51.     context.moveTo(20, 20);
  52.     context.lineTo(20, 100);
  53.     context.lineTo(70, 100);
  54.     context.closePath();
  55.     context.stroke();
  56. };
  58. canvas.createCircularGradient = function (context) {
  59.     // Create circular gradient
  60.     const grd = context.createCircularGradient(75, 50, 50);
  61.     grd.addColorStop(0, 'red');
  62.     grd.addColorStop(1, 'blue');
  64.     // Fill with gradient
  65.     context.setFillStyle(grd);
  66.     context.fillRect(30, 30, 150, 80);
  67. };
  69. canvas.createLinearGradient = function (context) {
  70.     const grd = context.createLinearGradient(0, 0, 200, 0);
  71.     grd.addColorStop(0, 'blue');
  72.     grd.addColorStop(1, 'red');
  74.     // Fill with gradient
  75.     context.setFillStyle(grd);
  76.     context.fillRect(30, 30, 150, 80);
  77. };
  79. canvas.drawImage = function (context) {
  80.     context.drawImage('https://b.bdstatic.com/searchbox/icms/searchbox/img/api_logo.png', 0, 0);
  81. };
  83. canvas.fill = function (context) {
  84.     context.beginPath();
  85.     context.moveTo(100, 100);
  86.     context.lineTo(10, 100);
  87.     context.lineTo(10, 10);
  88.     context.fill();
  89. };
  91. canvas.fillRect = function (context) {
  92.     context.beginPath();
  93.     context.setFillStyle('blue');
  94.     context.fillRect(30, 30, 150, 75);
  95. };
  97. canvas.fillText = function (context) {
  98.     context.setFontSize(20);
  99.     context.fillText('Hello', 20, 20);
  100.     context.fillText('World', 100, 100);
  101. };
  103. canvas.font = function (context) {
  104.     context.font = '50px oblique bold Microsoft YaiHei';
  105.     context.fillText('微软雅黑', 90, 90);
  106.     context.font = '50px 楷体';
  107.     context.fillText('楷体', 90, 200);
  108. };
  110. canvas.lineTo = function (context) {
  111.     context.beginPath();
  112.     context.moveTo(10, 10);
  113.     context.rect(10, 10, 100, 50);
  114.     context.lineTo(110, 60);
  115.     context.stroke();
  116. };
  118. canvas.moveTo = function (context) {
  119.     context.moveTo(10, 10);
  120.     context.lineTo(100, 10);
  121.     context.moveTo(10, 100);
  122.     context.lineTo(100, 100);
  123.     context.stroke();
  124. };
  126. canvas.quadraticCurveTo = function (context) {
  127.     context.beginPath();
  128.     context.moveTo(20, 20);
  129.     context.quadraticCurveTo(20, 100, 200, 20);
  130.     context.stroke();
  131. };
  134. canvas.rect = function (context) {
  135.     context.beginPath();
  136.     context.rect(30, 30, 150, 75);
  137.     context.stroke();
  138. };
  140. canvas.rotate = function (context) {
  141.     context.beginPath();
  142.     context.strokeRect(100, 10, 150, 100);
  143.     context.rotate(10 * Math.PI / 180);
  144.     context.strokeRect(100, 10, 150, 100);
  145.     context.rotate(10 * Math.PI / 180);
  146.     context.strokeRect(100, 10, 150, 100);
  147.     context.fill();
  148. };
  150. canvas.saveAndRestore = function (context) {
  151.     context.beginPath();
  152.     context.setFillStyle('red');
  153.     context.save();
  155.     context.setFillStyle('blue');
  156.     context.fillRect(10, 10, 150, 100);
  157.     context.restore();
  159.     context.fillRect(50, 50, 150, 100);
  160.     context.stroke();
  161. };
  163. canvas.scale = function (context) {
  164.     context.beginPath();
  165.     context.rect(10, 10, 25, 15);
  166.     context.stroke();
  168.     context.scale(2, 2);
  170.     context.beginPath();
  171.     context.rect(10, 10, 25, 15);
  172.     context.stroke();
  174.     context.scale(2, 2);
  176.     context.beginPath();
  177.     context.rect(10, 10, 25, 15);
  178.     context.stroke();
  179. };
  181. canvas.setFillStyle = function (context) {
  182.     ['blue', '#ffff00', 'rgba(255,255,0, 0.3)'].forEach(function (item, index) {
  183.         context.setFillStyle(item);
  184.         context.beginPath();
  185.         context.rect(0 + 75 * index, 0, 50, 50);
  186.         context.fill();
  187.     });
  188. };
  190. canvas.setFontSize = function (context) {
  191.     context.setFontSize(20);
  192.     context.fillText('20', 20, 20);
  193.     context.setFontSize(30);
  194.     context.fillText('30', 40, 40);
  195.     context.setFontSize(40);
  196.     context.fillText('40', 60, 60);
  197.     context.setFontSize(50);
  198.     context.fillText('50', 90, 90);
  199. };
  201. canvas.setGlobalAlpha = function (context) {
  202.     context.setFillStyle('red');
  203.     context.fillRect(10, 10, 150, 100);
  204.     context.setGlobalAlpha(0.2);
  205.     context.setFillStyle('blue');
  206.     context.fillRect(50, 50, 150, 100);
  207.     context.setFillStyle('yellow');
  208.     context.fillRect(100, 100, 150, 100);
  209.     context.draw();
  210. };
  212. canvas.setLineCap = function (context) {
  213.     context.beginPath();
  214.     context.moveTo(20, 10);
  215.     context.lineTo(200, 10);
  216.     context.stroke();
  217.     ['butt', 'round', 'square'].forEach(function (item, index) {
  218.         context.beginPath();
  219.         context.setLineCap(item);
  220.         context.setLineWidth(10);
  221.         context.moveTo(20 + 20 * index, 20 + 20 * index);
  222.         context.lineTo(200, 20 + 20 * index);
  223.         context.stroke();
  224.     });
  225. };
  227. canvas.setLineDash = function (context) {
  228.     context.setLineDash([10, 20], 5);
  229.     context.beginPath();
  230.     context.moveTo(0, 100);
  231.     context.lineTo(400, 100);
  232.     context.stroke();
  233. };
  235. canvas.setLineJoin = function (context) {
  236.     context.beginPath();
  237.     context.moveTo(10, 10);
  238.     context.lineTo(90, 50);
  239.     context.lineTo(10, 90);
  240.     context.stroke();
  241.     ['bevel', 'round', 'miter'].forEach(function (item, index) {
  242.         context.beginPath();
  243.         context.setLineJoin(item);
  244.         context.setLineWidth(10);
  245.         context.moveTo(30 + 80 * index, 10);
  246.         context.lineTo(120 + 80 * index, 50);
  247.         context.lineTo(30 + 80 * index, 90);
  248.         context.stroke();
  249.     });
  250. };
  252. canvas.setLineWidth = function (context) {
  253.     [1, 5, 10, 15].forEach(function (item, index) {
  254.         context.beginPath();
  255.         context.setLineWidth(item);
  256.         context.moveTo(20 + 10 * index, 20 + 20 * index);
  257.         context.lineTo(100, 20 + 20 * index);
  258.         context.stroke();
  259.     });
  260. };
  262. canvas.setMiterLimit = function (context) {
  263.     [1, 2, 3, 4].forEach(function (item, index) {
  264.         context.beginPath();
  265.         context.setMiterLimit(item);
  266.         context.setLineWidth(10);
  267.         context.setLineJoin('miter');
  268.         context.moveTo(50 + 40 * index, 10);
  269.         context.lineTo(140 + 40 * index, 50);
  270.         context.lineTo(50 + 40 * index, 90);
  271.         context.stroke();
  272.     });
  273. };
  275. canvas.setShadow = function (context) {
  276.     context.beginPath();
  277.     context.setFillStyle('blue');
  278.     context.setShadow(15, 15, 15, 'red');
  279.     context.rect(30, 30, 150, 75);
  280.     context.fill();
  281. };
  283. canvas.setStrokeStyle = function (context) {
  284.     context.setStrokeStyle('blue');
  285.     context.strokeRect(30, 30, 150, 75);
  286. };
  288. canvas.setTextAlign = function (context) {
  289.     context.setStrokeStyle('red');
  290.     context.moveTo(150, 20);
  291.     context.lineTo(150, 170);
  292.     context.stroke();
  294.     context.setFontSize(15);
  295.     context.setTextAlign('left');
  296.     context.fillText('textAlign=left', 150, 60);
  298.     context.setTextAlign('center');
  299.     context.fillText('textAlign=center', 150, 80);
  301.     context.setTextAlign('right');
  302.     context.fillText('textAlign=right', 150, 100);
  303. };
  305. canvas.setTextBaseline = function (context) {
  306.     context.setStrokeStyle('red');
  307.     context.moveTo(5, 75);
  308.     context.lineTo(295, 75);
  309.     context.stroke();
  311.     context.setFontSize(20);
  313.     context.setTextBaseline('top');
  314.     context.fillText('top', 5, 75);
  316.     context.setTextBaseline('middle');
  317.     context.fillText('middle', 50, 75);
  319.     context.setTextBaseline('bottom');
  320.     context.fillText('bottom', 120, 75);
  322.     context.setTextBaseline('normal');
  323.     context.fillText('normal', 200, 75);
  324. };
  326. canvas.setTransform = function (context) {
  327.     context.setFillStyle('blue');
  328.     context.fillRect(30, 30, 150, 75);
  329.     context.setTransform(1, 0.5, -0.5, 1, 30, 10);
  330.     context.setFillStyle('red');
  331.     context.fillRect(30, 30, 150, 75);
  332.     context.setTransform(1, 0.5, -0.5, 1, 30, 10);
  333. };
  335. canvas.stroke = function (context) {
  336.     context.beginPath();
  337.     context.moveTo(100, 100);
  338.     context.lineTo(10, 100);
  339.     context.lineTo(10, 10);
  340.     context.stroke();
  341. };
  343. canvas.strokeRect = function (context) {
  344.     context.setStrokeStyle('blue');
  345.     context.strokeRect(30, 30, 150, 75);
  346. };
  348. canvas.translate = function (context) {
  349.     context.strokeRect(10, 10, 150, 100);
  350.     context.translate(20, 20);
  351.     context.strokeRect(10, 10, 150, 100);
  352.     context.translate(20, 20);
  353.     context.strokeRect(10, 10, 150, 100);
  354. };
  356. canvas.addColorStop = function (context) {
  357.     const grd = context.createLinearGradient(30, 10, 120, 10);
  358.     grd.addColorStop(0, 'red');
  359.     grd.addColorStop(0.16, 'orange');
  360.     grd.addColorStop(0.33, 'yellow');
  361.     grd.addColorStop(0.5, 'green');
  362.     grd.addColorStop(0.66, 'cyan');
  363.     grd.addColorStop(0.83, 'blue');
  364.     grd.addColorStop(1, 'purple');
  366.     context.setFillStyle(grd);
  367.     context.fillRect(30, 30, 150, 80);
  368. };
  370. canvas.reset = function (context) {
  371.     context.beginPath();
  373.     context.setFillStyle('#000000');
  374.     context.setStrokeStyle('#000000');
  375.     context.setFontSize(10);
  377.     context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)');
  379.     context.setLineCap('butt');
  380.     context.setLineJoin('miter');
  381.     context.setLineWidth(1);
  382.     context.setMiterLimit(10);
  383. };
  385. module.exports = canvas;