swan.createCanvasContext

解释:在 Page 中,推荐使用this.createCanvasContext(canvasId),进行绘图上下文的创建。也可使用swan.createCanvasContext(canvasId),但使用swan.createCanvasContext(canvasId)进行创建时,并非在执行所在的 Page 对象中使用 canvasId 进行查找,而是在用户当前可视的 Page 中使用 canvasId 进行查找。

方法参数

String canvasId

canvasId 参数说明 :要获取 canvas 组件的 id。

返回值

CanvasContext

示例

在开发者工具中预览效果

扫码体验

swan.createCanvasContext - 图1请使用百度APP扫码

图片示例

swan.createCanvasContext - 图2

swan.createCanvasContext - 图3

swan.createCanvasContext - 图4

代码示例

  1. <view class="container">
  2. <view>
  3. <view class="card-area">
  4. <canvas canvas-id="canvas"></canvas>
  5. </view>
  6. <view class="card-area">
  7. <view class="top-description border-bottom">展示绘画</view>
  8. <scroll-view scroll-y class="scroll">
  9. <button s-for="item in methods" class="canvas-button" type="primary" bindtap="{{item}}">{{item}}</button>
  10. <button class="canvas-button" bindtap="toTempFilePath" type="primary">toTempFilePath</button>
  11. </scroll-view>
  12. </view>
  13. </view>
  14. <view class="page-title">
  15. <view class="page-title-line"></view>
  16. <view class="page-title-text">createCanvasContext</view>
  17. </view>
  18. </view>
  1. const canvas = require('./canvas.js');
  2. Page({
  3. data: {
  4. methods: []
  5. },
  6. onReady() {
  7. this.canvasContext = swan.createCanvasContext('canvas');
  8. const methods = Object.keys(canvas);
  9. this.setData({
  10. methods
  11. });
  12. const that = this;
  13. methods.forEach(function (method) {
  14. that[method] = function () {
  15. canvas[method](that.canvasContext);
  16. that.canvasContext.draw();
  17. }
  18. })
  19. },
  20. toTempFilePath() {
  21. swan.canvasToTempFilePath({
  22. canvasId: 'canvas',
  23. success(res) {
  24. console.log('canvasToTempFilePath success', res);
  25. },
  26. fail(err) {
  27. console.log('canvasToTempFilePath fail', err);
  28. }
  29. });
  30. }
  31. });
  • 在 canvas.js 文件中
  1. const canvas = {};
  2. canvas.rotate = function (context) {
  3. context.beginPath();
  4. context.rotate(10 * Math.PI / 180);
  5. context.rect(225, 75, 20, 10);
  6. context.fill();
  7. };
  8. canvas.scale = function (context) {
  9. context.beginPath();
  10. context.rect(25, 25, 50, 50);
  11. context.stroke();
  12. context.scale(2, 2);
  13. context.beginPath();
  14. context.rect(25, 25, 50, 50);
  15. context.stroke();
  16. };
  17. canvas.reset = function (context) {
  18. context.beginPath();
  19. context.setFillStyle('#000000');
  20. context.setStrokeStyle('#000000');
  21. context.setFontSize(10);
  22. context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)');
  23. context.setLineCap('butt');
  24. context.setLineJoin('miter');
  25. context.setLineWidth(1);
  26. context.setMiterLimit(10);
  27. };
  28. canvas.translate = function (context) {
  29. context.beginPath();
  30. context.rect(10, 10, 100, 50);
  31. context.fill();
  32. context.translate(70, 70);
  33. context.beginPath();
  34. context.fill();
  35. };
  36. canvas.save = function (context) {
  37. context.beginPath();
  38. context.setStrokeStyle('#00ff00');
  39. context.save();
  40. context.scale(2, 2);
  41. context.setStrokeStyle('#ff0000');
  42. context.rect(0, 0, 100, 100);
  43. context.stroke();
  44. context.restore();
  45. context.rect(0, 0, 50, 50);
  46. context.stroke();
  47. };
  48. canvas.restore = function (context) {
  49. [3, 2, 1].forEach(function (item) {
  50. context.beginPath();
  51. context.save();
  52. context.scale(item, item);
  53. context.rect(10, 10, 100, 100);
  54. context.stroke();
  55. context.restore();
  56. });
  57. };
  58. canvas.drawImage = function (context) {
  59. context.drawImage('/images/api_logo.png', 0, 0);
  60. };
  61. canvas.fillText = function (context) {
  62. context.setStrokeStyle('#ff0000');
  63. context.beginPath();
  64. context.moveTo(0, 10);
  65. context.lineTo(300, 10);
  66. context.stroke();
  67. context.setFontSize(10);
  68. context.fillText('Hello World', 0, 30);
  69. context.setFontSize(20);
  70. context.fillText('Hello World', 100, 30);
  71. context.beginPath();
  72. context.moveTo(0, 30);
  73. context.lineTo(300, 30);
  74. context.stroke();
  75. };
  76. canvas.fill = function (context) {
  77. context.beginPath();
  78. context.rect(20, 20, 150, 100);
  79. context.setStrokeStyle('#00ff00');
  80. context.fill();
  81. };
  82. canvas.stroke = function (context) {
  83. context.beginPath();
  84. context.moveTo(20, 20);
  85. context.lineTo(20, 100);
  86. context.lineTo(70, 100);
  87. context.setStrokeStyle('#00ff00');
  88. context.stroke();
  89. };
  90. canvas.clearRect = function (context) {
  91. context.setFillStyle('#ff0000');
  92. context.beginPath();
  93. context.rect(0, 0, 300, 150);
  94. context.fill();
  95. context.clearRect(20, 20, 100, 50);
  96. };
  97. canvas.beginPath = function (context) {
  98. context.beginPath();
  99. context.setLineWidth(5);
  100. context.setStrokeStyle('#ff0000');
  101. context.moveTo(0, 75);
  102. context.lineTo(250, 75);
  103. context.stroke();
  104. context.beginPath();
  105. context.setStrokeStyle('#0000ff');
  106. context.moveTo(50, 0);
  107. context.lineTo(150, 130);
  108. context.stroke();
  109. };
  110. canvas.closePath = function (context) {
  111. context.beginPath();
  112. context.moveTo(20, 20);
  113. context.lineTo(20, 100);
  114. context.lineTo(70, 100);
  115. context.closePath();
  116. context.stroke();
  117. };
  118. canvas.moveTo = function (context) {
  119. context.beginPath();
  120. context.moveTo(0, 0);
  121. context.lineTo(300, 150);
  122. context.stroke();
  123. };
  124. canvas.lineTo = function (context) {
  125. context.beginPath();
  126. context.moveTo(20, 20);
  127. context.lineTo(20, 100);
  128. context.lineTo(70, 100);
  129. context.stroke();
  130. };
  131. canvas.rect = function (context) {
  132. context.beginPath();
  133. context.rect(20, 20, 150, 100);
  134. context.stroke();
  135. };
  136. canvas.arc = function (context) {
  137. context.beginPath();
  138. context.arc(75, 75, 50, 0, Math.PI * 2, true);
  139. context.moveTo(110, 75);
  140. context.arc(75, 75, 35, 0, Math.PI, false);
  141. context.moveTo(65, 65);
  142. context.arc(60, 65, 5, 0, Math.PI * 2, true);
  143. context.moveTo(95, 65);
  144. context.arc(90, 65, 5, 0, Math.PI * 2, true);
  145. context.stroke();
  146. };
  147. canvas.quadraticCurveTo = function (context) {
  148. context.beginPath();
  149. context.moveTo(20, 20);
  150. context.quadraticCurveTo(20, 100, 200, 20);
  151. context.stroke();
  152. };
  153. canvas.bezierCurveTo = function (context) {
  154. context.beginPath();
  155. context.moveTo(20, 20);
  156. context.bezierCurveTo(20, 100, 200, 100, 200, 20);
  157. context.stroke();
  158. };
  159. canvas.setFillStyle = function (context) {
  160. ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
  161. context.setFillStyle(item);
  162. context.beginPath();
  163. context.rect(0 + 75 * index, 0, 50, 50);
  164. context.fill();
  165. });
  166. };
  167. canvas.setStrokeStyle = function (context) {
  168. ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
  169. context.setStrokeStyle(item);
  170. context.beginPath();
  171. context.rect(0 + 75 * index, 0, 50, 50);
  172. context.stroke();
  173. });
  174. };
  175. canvas.setGlobalAlpha = function (context) {
  176. context.setFillStyle('#000000');
  177. [1, 0.5, 0.1].forEach(function (item, index) {
  178. context.setGlobalAlpha(item);
  179. context.beginPath();
  180. context.rect(0 + 75 * index, 0, 50, 50);
  181. context.fill();
  182. });
  183. };
  184. canvas.setShadow = function (context) {
  185. context.beginPath();
  186. context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)');
  187. context.rect(10, 10, 100, 100);
  188. context.fill();
  189. };
  190. canvas.setFontSize = function (context) {
  191. [10, 20, 30, 40].forEach(function (item, index) {
  192. context.setFontSize(item);
  193. context.fillText('Hello, world', 20, 20 + 40 * index);
  194. });
  195. };
  196. canvas.setLineCap = function (context) {
  197. context.setLineWidth(10);
  198. ['butt', 'round', 'square'].forEach(function (item, index) {
  199. context.beginPath();
  200. context.setLineCap(item);
  201. context.moveTo(20, 20 + 20 * index);
  202. context.lineTo(100, 20 + 20 * index);
  203. context.stroke();
  204. });
  205. };
  206. canvas.setLineJoin = function (context) {
  207. context.setLineWidth(10);
  208. ['bevel', 'round', 'miter'].forEach(function (item, index) {
  209. context.beginPath();
  210. context.setLineJoin(item);
  211. context.moveTo(20 + 80 * index, 20);
  212. context.lineTo(100 + 80 * index, 50);
  213. context.lineTo(20 + 80 * index, 100);
  214. context.stroke();
  215. });
  216. };
  217. canvas.setLineWidth = function (context) {
  218. [2, 4, 6, 8, 10].forEach(function (item, index) {
  219. context.beginPath();
  220. context.setLineWidth(item);
  221. context.moveTo(20, 20 + 20 * index);
  222. context.lineTo(100, 20 + 20 * index);
  223. context.stroke();
  224. });
  225. };
  226. canvas.setMiterLimit = function (context) {
  227. context.setLineWidth(4);;
  228. [2, 4, 6, 8, 10].forEach(function (item, index) {
  229. context.beginPath();
  230. context.setMiterLimit(item);
  231. context.moveTo(20 + 80 * index, 20);
  232. context.lineTo(100 + 80 * index, 50);
  233. context.lineTo(20 + 80 * index, 100);
  234. context.stroke();
  235. });
  236. };
  237. module.exports = canvas;