All Products
Search
Document Center

Canvas

Last Updated: Feb 04, 2021

This topic describes the canvas.

Attribute Type Default value Description Minimum version
id String - The unique identifier of the component. -
style String - - -
class String - - -
width String canvas width attribute - -
height String canvas height attribute - -
disable-scroll Boolean false Disallow screen scrolling and pull-down refresh. -
onTap EventHandle - Click -
onTouchStart EventHandle - Start the touch action. -
onTouchMove EventHandle - Move after the touch action. -
onTouchEnd EventHandle - End the touch action. -
onTouchCancel EventHandle - The touch action is interrupted, such as by a incoming call reminder or pop-up window. -
onLongTap EventHandle - Trigger after a long press for 500 ms. Moving after the long press event is triggered does not trigger the scrolling of the screen. -
Note:
  • The default width of the canvas label is 300px and the height is 225px.
  • No repetitive id is allowed on the same page.
  • To obtain a more delicate display under a high dpr, first increase canvas in attribute settings and then reduce it with the style, for example:
 
  1. <!-- getSystemInfoSync().pixelRatio === 2 -->
  2. <canvas width="200" height="200" style="width:100px;height:100px;"/>

Illustration

image | center

Code sample

 
  1. <canvas
  2. id="canvas"
  3. class="canvas"
  4. onTouchStart="log"
  5. onTouchMove="log"
  6. onTouchEnd="log"
  7. />
 
  1. Page({
  2. onReady() {
  3. this.point = {
  4. x: Math.random() * 295,
  5. y: Math.random() * 295,
  6. dx: Math.random() * 5,
  7. dy: Math.random() * 5,
  8. r: Math.round(Math.random() * 255 | 0),
  9. g: Math.round(Math.random() * 255 | 0),
  10. b: Math.round(Math.random() * 255 | 0),
  11. };
  12. this.interval = setInterval(this.draw.bind(this), 17);
  13. },
  14. draw() {
  15. var ctx = my.createCanvasContext('canvas');
  16. ctx.setFillStyle('#FFF');
  17. ctx.fillRect(0, 0, 305, 305);
  18. ctx.beginPath();
  19. ctx.arc(this.point.x, this.point.y, 10, 0, 2 * Math.PI);
  20. ctx.setFillStyle("rgb(" + this.point.r + ", " + this.point.g + ", " + this.point.b + ")");
  21. ctx.fill();
  22. ctx.draw();
  23. this.point.x += this.point.dx;
  24. this.point.y += this.point.dy;
  25. if (this.point.x <= 5 || this.point.x >= 295) {
  26. this.point.dx = -this.point.dx;
  27. this.point.r = Math.round(Math.random() * 255 | 0);
  28. this.point.g = Math.round(Math.random() * 255 | 0);
  29. this.point.b = Math.round(Math.random() * 255 | 0);
  30. }
  31. if (this.point.y <= 5 || this.point.y >= 295) {
  32. this.point.dy = -this.point.dy;
  33. this.point.r = Math.round(Math.random() * 255 | 0);
  34. this.point.g = Math.round(Math.random() * 255 | 0);
  35. this.point.b = Math.round(Math.random() * 255 | 0);
  36. }
  37. },
  38. drawBall() {
  39. },
  40. log(e) {
  41. if (e.touches && e.touches[0]) {
  42. console.log(e.type, e.touches[0].x, e.touches[0].y);
  43. } else {
  44. console.log(e.type);
  45. }
  46. },
  47. onUnload() {
  48. clearInterval(this.interval)
  49. }
  50. })