If only the Canvas tag is left

[[420999]]

1. Background

If only the canvas tag is left, how can we draw the content on the page? This may be a false proposition, but using canvas can indeed help accomplish many things. Today, we will use canvas+AST syntax tree to build an information flow style.

2. Drawing Process

The entire drawing process is divided into three parts: basic elements, AST syntax tree, and main function class. Basic elements refer to pictures, text, rectangles, circles, etc.; the AST syntax tree here is a js object containing some properties; the main function class refers to the externally exposed interface, which is called to achieve the final drawing.

2.1 Basic Elements

No matter how complex something is, it is definitely made up of a series of simple elements. For example, a car is definitely made up of some simple mechanical parts; a computer is also made up of resistors, capacitors and other parts. Web pages are no exception, and are also made up of text, pictures, rectangles, etc.

2.1.1 Loading images

Pictures are the soul element of a page and occupy most of the space on the page.

 class DrawImage {
    constructor(ctx, imageObj) {
 this.ctx = ctx;
        this.imageObj = imageObj;
 } 
 
 draw() {
        const {centerX, centerY, src, sx = 1, sy = 1} = this.imageObj;
        const img = new Image();
 img.onload = () => {
            const imgWidth = img.width;
            const imgHeight = img.height;
 this.ctx.save();
            this.ctx.scale(sx, sy);
            this.ctx.drawImage(img, centerX - imgWidth * sx / 2, centerY - imgHeight * sy / 2);
            this.ctx.restore();
 };
 img.src = src;
 }
 }

2.1.2 Drawing Text

Text can improve the readability of the page, allowing everyone who observes the page to quickly understand the idea of ​​the page.

 class DrawText {
    constructor(ctx, textObj) {
 this.ctx = ctx;
        this.textObj = textObj;
 } 
 
 draw() {
        const {x, y, font, content, lineHeight = 20, width, fillStyle = '#000000' , textAlign = 'start' , textBaseline = 'middle' } = this.textObj;
        const branchesContent = this.getBranchsContent(content, width);
 this.ctx.save();
        this.ctx.fillStyle = fillStyle;
        this.ctx.textAlign = textAlign;
        this.ctx.textBaseline = textBaseline;
 this.ctx.font = font;
        branchesContent.forEach((branchContent, index ) => {
            this.ctx.fillText(branchContent, x, y + index * lineHeight);
 });
 this.ctx.restore();
 } 
 
    getBranchsContent(content, width) {
 if (!width) {
 return [content];
 }
        const charArr = content.split( '' );
        const branchesContent = [];
        let tempContent = '' ;
        charArr.forEach( char => {
            if (this.ctx.measureText(tempContent).width < width && this.ctx.measureText(tempContent + char ).width <= width) {
                tempContent += char ;
 }
 else {
                branchesContent.push(tempContent);
                tempContent = '' ;
 }
 });
        branchesContent.push(tempContent);
 return branchesContent;
 }
 }

2.1.3 Drawing a rectangle

Rectangular elements can be combined with text and other elements to achieve unexpected effects.

 class DrawRect {
    constructor(ctx, rectObj) {
 this.ctx = ctx;
        this.rectObj = rectObj;
 } 
 
 draw() {
        const {x, y, width, height, fillStyle, lineWidth = 1} = this.rectObj;
 this.ctx.save();
        this.ctx.fillStyle = fillStyle;
        this.ctx.lineWidth = lineWidth;
        this.ctx.fillRect(x, y, width, height);
 this.ctx.restore();
 }
 }

2.1.4 Drawing a circle

The circle and rectangle play the same role and are also relatively important roles on the page.

 class DrawCircle {
    constructor(ctx, circleObj) {
 this.ctx = ctx;
        this.circleObj = circleObj;
 } 
 
 draw() {
        const {x, y, R, startAngle = 0, endAngle = Math.PI * 2, lineWidth = 1, fillStyle} = this.circleObj;
 this.ctx.save();
        this.ctx.lineWidth = lineWidth;
        this.ctx.fillStyle = fillStyle;
 this.ctx.beginPath();
        this.ctx.arc(x, y, R, startAngle, endAngle);
 this.ctx.closePath();
 this.ctx.fill();
 this.ctx.restore();
 }
 }

2.2 AST Tree

AST is an abstract representation of the syntax structure of the source code. It represents the syntax structure of the programming language in a tree-like form, and each node on the tree represents a structure in the source code. For example, in Vue, the template syntax is converted to AST, and then the AST is converted to HTML structure. When we use canvas to draw a page, we also use AST to represent the content of the page. The types implemented are rect, img, text, and circle.

The content to be drawn this time includes the static page part and the animation part, so two canvases will be used to implement it. Each canvas will correspond to an AST tree, namely the static part AST tree and the dynamic part AST tree.

2.2.1 Static Part AST Tree

The AST tree of the static part of the page drawn this time is as follows, including rectangles, pictures, and text.

 const graphicAst = [
 {
 type: 'rect' ,
 x: 0,
 y: 0,
 width: 1400,
 height: 400,
 fillStyle: '#cec9ae'  
 },
 {
 type: 'img' ,
 centerX: 290,
 centerY: 200,
 sx: 0.9,
 sy: 0.9,
        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'  
 },
 {
 type: 'text' ,
 x: 600,
 y: 60,
 textAlign: 'start' ,
        textBaseline: 'middle' ,
        font: 'normal 40px serif' ,
 lineHeight: 50,
 width: 180,
        fillStyle: '#000000' ,
 content: 'Grey Wolf is the best wolf. He dreams of eating sheep every day, but his dream has never come true. However, he never gives up.'  
 },
 {
 type: 'text' ,
 x: 600,
 y: 170,
 textAlign: 'start' ,
        textBaseline: 'middle' ,
        font: 'normal 30px serif' ,
 lineHeight: 50,
 width: 180,
        fillStyle: '#7F7F7F' ,
 content: 'Come on for Big Bad Wolf, cheer for Big Bad Wolf, 😄'  
 },
 {
 type: 'text' ,
 x: 1200,
 y: 360,
 textAlign: 'start' ,
        textBaseline: 'ideographic' ,
        font: 'normal 30px serif' ,
 lineHeight: 50,
 width: 180,
        fillStyle: '#949494' ,
 content: 'Reading'  
 },
 {
 type: 'text' ,
 x: 1260,
 y: 363,
 textAlign: 'start' ,
        textBaseline: 'ideographic' ,
        font: 'normal 30px serif' ,
 lineHeight: 50,
 width: 180,
        fillStyle: '#949494' ,
 content: '520'  
 }
 ];

2.2.2 Dynamic Partial AST Tree

The AST tree of the animation part of the page drawn this time is dynamically generated and consists of a series of circles with dynamic colors.

 function getMarqueeAst(startX, endX, count , options = {}) {
    const {y = 15, R = 15} = options;
    if (!(endX >= startX && count > 0)) {
 return [];
 }
    const interval = (endX - startX) / count ;
 const marqueeAstArr = [];
 for (let i = 0; i < count ; i++) {
        const RValue = Math.random() * 255;
        const GValue = Math.random() * 255;
        const BValue = Math.random() * 255;
        const fillStyle = `rgb(${RValue}, ${GValue}, ${BValue})`;
 marqueeAstArr.push({
 type: 'circle' ,
            x: startX + i * interval,
 y,
 R,
 fillStyle
 });
 } 
 
 return marqueeAstArr;
 }

2.3 Main function class

In addition to the above basic element classes, they will be exposed to the outside through a main function class.

 class Draw {
 constructor(canvasDom) {
        this._canvasDom = canvasDom;
        this.ctx = this._canvasDom.getContext( '2d' );
        this.width = this._canvasDom.width;
        this.height = this._canvasDom.height;
 } 
 
 //Drawing function
 draw(ast) {
        ast.forEach(elementObj => {
            this.drawFactory(elementObj);
            const {children} = elementObj;
 // Recursive call
            if (children && Array.isArray(children)) {
                this.draw(children);
 }
 });
 } 
 
 // Factory model drawing corresponding basic elements
 drawFactory(elementObj) {
        const {type} = elementObj;
 switch(type) {
 case   'img' : {
                this.drawImage(elementObj);
 break;
 }
 case   'text' : {
                this.drawText(elementObj);
 break;
 }
 case   'rect' : {
                this.drawRect(elementObj);
 break;
 }
 case   'circle' : {
                this.drawCircle(elementObj);
 break;
 }
 }
 } 
 
 drawImage(imageObj) {
        const drawImage = new DrawImage(this.ctx, imageObj);
 drawImage.draw();
 } 
 
 drawText(textObj) {
        const drawText = new DrawText(this.ctx, textObj);
 drawText.draw();
 } 
 
 drawRect(rectObj) {
        const drawRect = new DrawRect(this.ctx, rectObj);
 drawRect.draw();
 } 
 
 drawCircle(circleObj) {
        const drawCircle = new DrawCircle(this.ctx, circleObj);
 drawCircle.draw();
 } 
 
 clearCanvas() {
        this.ctx.clearRect(0, 0, this.width, this.height);
 }
 }

2.4 Content drawing

The previous preparations have been completed. Now we will link the various functions with the AST tree to achieve the desired effect.

2.4.1 Static content drawing

First draw the static content as the cornerstone of the page.

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

Static content.png

2.4.2 Drawing an animated marquee

Add some animation effects to this part to make it more exciting.

 const animationCanvasDom = document.getElementById( 'animationCanvas' );
 const drawAnimationInstance = new Draw(animationCanvasDom); 
 
 let renderCount = 0;
 function animate() {
    if (renderCount % 5 === 0) {
        drawAnimationInstance.clearCanvas();
        drawAnimationInstance.draw(getMarqueeAst(20, 1440, 22));
        drawAnimationInstance.draw(getMarqueeAst(20, 1440, 22, {
 y: 380
 }));
 }
    window.requestAnimationFrame(animate);
 renderCount++;
 }
 animate();

This article is reprinted from the WeChat public account "Zhiyuanzhe", which can be followed through the following QR code. To reprint this article, please contact Zhiyuanzhe's public account.