假如只剩下Canvas标签

网络 通信技术
如果只剩下canvas标签,该如何去绘制页面中的内容呢?这也许是一个伪命题,但是用canvas确事能够帮助完成很多事。今天就用canvas+AST语法树构建一个信息流样式。

[[420999]]

一、背景

如果只剩下canvas标签,该如何去绘制页面中的内容呢?这也许是一个伪命题,但是用canvas确事能够帮助完成很多事。今天就用canvas+AST语法树构建一个信息流样式。

二、绘制流程

将整个绘制流程分为三部分:基本元素、AST语法树、主函数类。基本元素指的是图片、文字、矩形、圆等;AST语法树在本处值得就是包含一些属性的js对象;主函数类指对外暴露的接口,通过调用实现最终绘制。

2.1 基本元素

不管多么复杂的事物肯定都是由一系列简单的元素组成,例如汽车肯定是通过一些简单的机械零配件组成;电脑也是通过电阻、电容等零配件组成。网页也不例外,也是通过文字、图片、矩形等组成。

2.1.1 加载图片

图片是一个页面中的灵魂元素,在页面中占据绝大部分空间。

  1. class DrawImage { 
  2.     constructor(ctx, imageObj) { 
  3.         this.ctx = ctx; 
  4.         this.imageObj = imageObj; 
  5.     } 
  6.  
  7.     draw() { 
  8.         const {centerX, centerY, src, sx = 1, sy = 1} = this.imageObj; 
  9.         const img = new Image(); 
  10.         img.onload = () => { 
  11.             const imgWidth = img.width; 
  12.             const imgHeight = img.height; 
  13.             this.ctx.save(); 
  14.             this.ctx.scale(sx, sy); 
  15.             this.ctx.drawImage(img, centerX - imgWidth * sx / 2, centerY - imgHeight * sy / 2); 
  16.             this.ctx.restore(); 
  17.         }; 
  18.         img.src = src; 
  19.     } 

2.1.2 绘制文字

文字能够提高页面的可读性,让观察该页面的每一个人都能够快速了解该页面的思想。

  1. class DrawText { 
  2.     constructor(ctx, textObj) { 
  3.         this.ctx = ctx; 
  4.         this.textObj = textObj; 
  5.     } 
  6.  
  7.     draw() { 
  8.         const {x, y, font, content, lineHeight = 20, width, fillStyle = '#000000', textAlign = 'start', textBaseline = 'middle'} = this.textObj; 
  9.         const branchsContent = this.getBranchsContent(content, width); 
  10.         this.ctx.save(); 
  11.         this.ctx.fillStyle = fillStyle; 
  12.         this.ctx.textAlign = textAlign; 
  13.         this.ctx.textBaseline = textBaseline; 
  14.         this.ctx.font = font; 
  15.         branchsContent.forEach((branchContent, index) => { 
  16.             this.ctx.fillText(branchContent, x, y + index * lineHeight); 
  17.         }); 
  18.         this.ctx.restore(); 
  19.     } 
  20.  
  21.     getBranchsContent(content, width) { 
  22.         if (!width) { 
  23.             return [content]; 
  24.         } 
  25.         const charArr = content.split(''); 
  26.         const branchsContent = []; 
  27.         let tempContent = ''
  28.         charArr.forEach(char => { 
  29.             if (this.ctx.measureText(tempContent).width < width && this.ctx.measureText(tempContent + char).width <= width) { 
  30.                 tempContent += char
  31.             } 
  32.             else { 
  33.                 branchsContent.push(tempContent); 
  34.                 tempContent = ''
  35.             } 
  36.         }); 
  37.         branchsContent.push(tempContent); 
  38.         return branchsContent; 
  39.     } 

2.1.3 绘制矩形

通过矩形元素能够与文字等元素配合达到意想不到的效果。

  1. class DrawRect { 
  2.     constructor(ctx, rectObj) { 
  3.         this.ctx = ctx; 
  4.         this.rectObj = rectObj; 
  5.     } 
  6.  
  7.     draw() { 
  8.         const {x, y, width, height, fillStyle, lineWidth = 1} = this.rectObj; 
  9.         this.ctx.save(); 
  10.         this.ctx.fillStyle = fillStyle; 
  11.         this.ctx.lineWidth = lineWidth; 
  12.         this.ctx.fillRect(x, y, width, height); 
  13.         this.ctx.restore(); 
  14.     } 

2.1.4 绘制圆

圆与矩形承担的角色一致,也是在页面中比较重要的角色。

  1. class DrawCircle { 
  2.     constructor(ctx, circleObj) { 
  3.         this.ctx = ctx; 
  4.         this.circleObj = circleObj; 
  5.     } 
  6.  
  7.     draw() { 
  8.         const {x, y, R, startAngle = 0, endAngle = Math.PI * 2, lineWidth = 1, fillStyle} = this.circleObj; 
  9.         this.ctx.save(); 
  10.         this.ctx.lineWidth = lineWidth; 
  11.         this.ctx.fillStyle = fillStyle; 
  12.         this.ctx.beginPath(); 
  13.         this.ctx.arc(x, y, R, startAngle, endAngle); 
  14.         this.ctx.closePath(); 
  15.         this.ctx.fill(); 
  16.         this.ctx.restore(); 
  17.     } 

2.2 AST树

AST抽象语法树是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构。例如,在Vue中,将模板语法转换为AST抽象语法树,然后再将抽象语法树转换为HTML结构,咱们在利用canvas绘制页面时也利用AST抽象语法树来表示页面中的内容,实现的类型有rect(矩形)、img(图片)、text(文字)、circle(圆)。

本次将绘制的内容包含静态页面部分和动画部分,所以将利用两个canvas实现,每个canvas将对应一个AST树,分别为静态部分AST树和动态部分AST树。

2.2.1 静态部分AST树

本次绘制的页面中静态部分的AST树如下所示,包含矩形、图片、文字。

  1. const graphicAst = [ 
  2.     { 
  3.         type: 'rect'
  4.         x: 0, 
  5.         y: 0, 
  6.         width: 1400, 
  7.         height: 400, 
  8.         fillStyle: '#cec9ae' 
  9.     }, 
  10.     { 
  11.         type: 'img'
  12.         centerX: 290, 
  13.         centerY: 200, 
  14.         sx: 0.9, 
  15.         sy: 0.9, 
  16.         src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11858683821%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622015341&t=cc1bd95777dfa37d88c48bb6e179778e' 
  17.     }, 
  18.     { 
  19.         type: 'text'
  20.         x: 600, 
  21.         y: 60, 
  22.         textAlign: 'start'
  23.         textBaseline: 'middle'
  24.         font: 'normal 40px serif'
  25.         lineHeight: 50, 
  26.         width: 180, 
  27.         fillStyle: '#000000'
  28.         content: '灰太狼是最好的一头狼,它每天都在梦想着吃羊,一直没有实现,但是从不气馁。' 
  29.     }, 
  30.     { 
  31.         type: 'text'
  32.         x: 600, 
  33.         y: 170, 
  34.         textAlign: 'start'
  35.         textBaseline: 'middle'
  36.         font: 'normal 30px serif'
  37.         lineHeight: 50, 
  38.         width: 180, 
  39.         fillStyle: '#7F7F7F'
  40.         content: '为灰太狼加油、为灰太狼喝彩,😄' 
  41.     }, 
  42.     { 
  43.         type: 'text'
  44.         x: 1200, 
  45.         y: 360, 
  46.         textAlign: 'start'
  47.         textBaseline: 'ideographic'
  48.         font: 'normal 30px serif'
  49.         lineHeight: 50, 
  50.         width: 180, 
  51.         fillStyle: '#949494'
  52.         content: '阅读' 
  53.     }, 
  54.     { 
  55.         type: 'text'
  56.         x: 1260, 
  57.         y: 363, 
  58.         textAlign: 'start'
  59.         textBaseline: 'ideographic'
  60.         font: 'normal 30px serif'
  61.         lineHeight: 50, 
  62.         width: 180, 
  63.         fillStyle: '#949494'
  64.         content: '520' 
  65.     } 
  66. ]; 

2.2.2 动态部分AST树

本次绘制的页面中动画部分的AST树动态生成,由一系列动态颜色的圆组成。

  1. function getMarqueeAst(startX, endX, count, options = {}) { 
  2.     const {y = 15, R = 15} = options; 
  3.     if (!(endX >= startX && count > 0)) { 
  4.         return []; 
  5.     } 
  6.     const interval = (endX - startX) / count
  7.     const marqueeAstArr = []; 
  8.     for (let i = 0; i < count; i++) { 
  9.         const RValue = Math.random() * 255; 
  10.         const GValue = Math.random() * 255; 
  11.         const BValue = Math.random() * 255; 
  12.         const fillStyle = `rgb(${RValue}, ${GValue}, ${BValue})`; 
  13.         marqueeAstArr.push({ 
  14.             type: 'circle'
  15.             x: startX + i * interval, 
  16.             y, 
  17.             R, 
  18.             fillStyle 
  19.         }); 
  20.     } 
  21.  
  22.     return marqueeAstArr; 

2.3 主函数类

除了上述一些基本元素类,将通过一个主函数类对外进行暴露。

  1. class Draw { 
  2.     constructor(canvasDom) { 
  3.         this._canvasDom = canvasDom; 
  4.         this.ctx = this._canvasDom.getContext('2d'); 
  5.         this.width = this._canvasDom.width; 
  6.         this.height = this._canvasDom.height; 
  7.     } 
  8.  
  9.     // 绘制函数 
  10.     draw(ast) { 
  11.         ast.forEach(elementObj => { 
  12.             this.drawFactory(elementObj); 
  13.             const {children} = elementObj; 
  14.             // 递归调用 
  15.             if (children && Array.isArray(children)) { 
  16.                 this.draw(children); 
  17.             } 
  18.         }); 
  19.     } 
  20.  
  21.     // 工厂模型绘制对应基本元素 
  22.     drawFactory(elementObj) { 
  23.         const {type} = elementObj; 
  24.         switch(type) { 
  25.             case 'img': { 
  26.                 this.drawImage(elementObj); 
  27.                 break; 
  28.             } 
  29.             case 'text': { 
  30.                 this.drawText(elementObj); 
  31.                 break; 
  32.             } 
  33.             case 'rect': { 
  34.                 this.drawRect(elementObj); 
  35.                 break; 
  36.             } 
  37.             case 'circle': { 
  38.                 this.drawCircle(elementObj); 
  39.                 break; 
  40.             } 
  41.         } 
  42.     } 
  43.  
  44.     drawImage(imageObj) { 
  45.         const drawImage = new DrawImage(this.ctx, imageObj); 
  46.         drawImage.draw(); 
  47.     } 
  48.  
  49.     drawText(textObj) { 
  50.         const drawText = new DrawText(this.ctx, textObj); 
  51.         drawText.draw(); 
  52.     } 
  53.  
  54.     drawRect(rectObj) { 
  55.         const drawRect = new DrawRect(this.ctx, rectObj); 
  56.         drawRect.draw(); 
  57.     } 
  58.  
  59.     drawCircle(circleObj) { 
  60.         const drawCircle = new DrawCircle(this.ctx, circleObj); 
  61.         drawCircle.draw(); 
  62.     } 
  63.  
  64.     clearCanvas() { 
  65.         this.ctx.clearRect(0, 0, this.width, this.height); 
  66.     } 

2.4 内容绘制

前面的准备工作已经完成,下面将各个函数和AST树联动起来,达到想要的效果。

2.4.1 静态内容绘制

先将静态部分的内容绘制好,作为页面的基石。

  1. const basicCanvasDom = document.getElementById('basicCanvas'); 
  2. const drawBasicInstance = new Draw(basicCanvasDom); 
  3. drawBasicInstance.draw(graphicAst); 

静态内容.png

2.4.2 绘制动画跑马灯

再给该部分内容来点动画效果,更加激动人心。

  1. const animationCanvasDom = document.getElementById('animationCanvas'); 
  2. const drawAnimationInstance = new Draw(animationCanvasDom); 
  3.  
  4. let renderCount = 0; 
  5. function animate() { 
  6.     if (renderCount % 5 === 0) { 
  7.         drawAnimationInstance.clearCanvas(); 
  8.         drawAnimationInstance.draw(getMarqueeAst(20, 1440, 22)); 
  9.         drawAnimationInstance.draw(getMarqueeAst(20, 1440, 22, { 
  10.             y: 380 
  11.         })); 
  12.     } 
  13.     window.requestAnimationFrame(animate); 
  14.     renderCount++; 
  15. animate(); 

本文转载自微信公众号「执鸢者」,可以通过以下二维码关注。转载本文请联系执鸢者公众号。

 

责任编辑:武晓燕 来源: 前端点线面
相关推荐

2011-08-29 10:02:27

iPadaPad亚马逊

2020-05-19 13:58:55

私有云容器虚拟化

2024-01-08 09:11:24

编程语言欧洲

2018-07-11 15:31:24

程序员Java编程

2019-05-15 14:42:56

国产手机华为雷军

2023-01-31 11:06:01

模型算力

2017-11-30 16:23:46

逆向华为云工程师

2014-08-26 10:42:26

CIO

2020-12-23 13:22:14

Kubernetes设计网络

2019-11-18 10:34:24

戴尔

2021-03-25 16:01:11

编程语言CPU机器语言

2009-12-01 17:10:53

Linux版本

2021-03-26 06:00:37

编程语言CPU

2011-08-11 09:16:50

JavaScript

2018-09-07 23:10:15

程序员技能沟通

2021-09-05 18:25:57

文件系统

2020-04-20 09:02:33

函数RPCCPU

2019-03-28 10:09:49

内存CPU硬盘

2020-08-11 14:47:40

iPhone苹果APP

2011-08-12 08:56:31

JavaScript
点赞
收藏

51CTO技术栈公众号