For other translations of this series, see [JS Working Mechanism – Xiaobai’s 1991 column – Nuggets (juejin. Cn)] (juejin.cn/column/6988…

This article introduces some interesting historical facts and some current ways of handling graphics. They’re shallow. But WebGL is worth digging into, and this is a big direction in which the front end could make a big push.

An overview of

make our way to the vast graphics offerings of modern browsers. In this chapter we will review the history of graphics in browsers. We’ll see some old friends like Java Applets and ActiveX, and some new friends like SVG, HTML 5 Canvas, and WebGL. Start with history

Browser 1990 to the present

In 1989, [Tim Berners-Lee] invented the WWW by combining technologies like DNS and TCP.

Since then, many browsers have been created. One of them, [Mosaic], was released in 1993. It introduced two revolutionary features, introducing graphics and support for Windows. That took it from a researchable tool to a mass-market application.

In 1995, Netscape released version 0.9 and quickly captured 75% of the market. Most importantly, [Brendam Eich] invented JS that was built into Netscape 2.0. In 1995, Microsoft also released Internet Explorer 1.0. Opened the browser wars between Netscape and Microsoft. Eventually IE4 dominated the market. In 2001, IE6 became the first winner with 96% of the browser market.

Three years later, however, a new war began. Firefox rose from the ashes of Netscape with its first release in 2004. Google released Chrome in 2008. By 2010, IE’s share had fallen below 50%. In 2012, Chrome passed Internet Explorer. Mobile browsers are also becoming increasingly important.

There are other players, like Opera and Safari, but they don’t account for more than 10% of the market.

These days Chrome dominates the desktop with 77%, all others are below 10%. Now. Chrome has surpassed 77%, while others have less than 10%

Microsoft’s latest browser, Edge, has been based on Chromium since 2020.

All right, let’s look at graphs and images

Images in the browser

The venerable tag, introduced by Mosaic in 1993 and then incorporated into the HTML2.0 standard, became an important part of the web.

In the early days of the Web, that’s all we had. But developers are still very creative, combining JS with graphics, making graphics move around, and even playing games.

Of course, there are performance issues. There are many tricks to solve performance problems, such as image mapping, lazy loading in the background, detail degradation and so on. But the graphics tools were rudimentary anyway.

Java Applets

Enter the Java age. Java is the language of the Internet. Java Applets were a powerful force in the browser world from 1995 to 2017, until browsers were no longer supported due to serious security issues. Java Applets can be cross-platform and supported by all browsers of all operating systems. It has access to 3D hardware acceleration, much faster than JS. In the early days, Java Applets were the first choice for rich interactive and visual applications. Until browser manufacturers gradually kicked it out. To use Java applets in a page, you need the

tag:

<html>  
  <body>  
    <applet code="CoolApplet.class" width="500" height="500">  
    </applet>  
  </body>  
</html>
Copy the code

You need to use the applet code as you would use a Java class. This class must inherit from Java.applet.

Let’s draw a circle using a Java applet:

import java.awt.Graphics; import java.applet.Applet; public class CoolApplet extends Applet { public void paint (Graphics g) { g.drawOval(250, 250, 100, 100); }}Copy the code

ActiveX control

IE has always supported Java Applets, but Microsoft uses its own technology stack, based on COM/OLE. ActiveX controls. In IE3 to IE11, you can embed ActiveX controls. But the current Edge doesn’t.

ActiveX controls have a GUID identifier, called CLSID. Embed it in a web page using the tag.

<html>  
  <body>  
    <object id="CoolActiveX" width="300" height="100"
       classid="B5612DAA-2EEF-1173-85DF-00105AC8B715">
    </object>
  </body>  
</html>
Copy the code

Macromedia/Adobe Shockwave and Flash

Macromedia (1992 — 2005) is a powerful force in Web tools and development. Macromedia Shockwave player is a Netscape plug-in for publishing Web multimedia, images, and animations. Shockwave had a lot going for it and was still in the market until 2019. In 1996, Macromedia released Flash Player 1.0. Flash had its own editor. Shockwave and Flash allow developers to create rich apps, games, and visual effects. In 2000, Flash 5 was released and quickly spread to every corner of the Internet. Adobe is also committed to open source components, such as the SWF file format, and has donated the ActionScript VM to the Mozilla Foundation.

During those years, Flash was hugely successful, but at the same time it was a crisis. In 2010, Jobs wrote an open letter to Adobe blaming it for security issues.

In 2017, Adobe announced that Flash would be dead by 2020. In 2021, browsers will no longer support Flash content at all

HTML 5 and the modern Web

The W3C released H5 in 2008. It supports multimedia applications and is compatible with low-level devices such as mobile phones. H5 introduces a modern space for developing sophisticated, rich Web applications without any plug-ins. It ushered in a new golden age.

The HTML standard is now maintained by the WHATWG, a group of browser vendors that maintains the current HTML standard.

However, it all started with H5, which includes several Web standards such as H4,XHTML 1.0, and DOM Level 2. In addition, some new elements have been added to manage the page structure, such as


,

,

,

,

,

Browser vendors’ support for H5 allows developers to develop cross-browser and cross-platform applications using only standard Web technologies.

H5 and standard API support for rich Web applications have pushed JS to the forefront. At one time, web programs used many programming languages, and JS was mainly used to add some interaction.

Take a look at the graphical support in modern browsers:

SVG (Scalable Vector Graphics)

SVG is a complex XML language for describing vector graphics and much more. All modern browsers support it. SVG content can be embedded in a Web page just like HTML elements:

For example, let’s draw a golden rectangle:

<? The XML version = "1.0" encoding = "utf-8"? > <! DOCTYPE SVG PUBLIC "- / / / / W3C DTD SVG 1.1 / / EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > < SVG XMLNS = "http://www.w3.org/2000/svg" version = "1.1" width = "120" height = "120" > < the rect x = "10" y = "10" width = "200" height = "100" fill="gold" stroke="black" /> </svg>Copy the code

When you embed a page, you don’t need XML metadata. To draw the same rectangle, you can do this:

<html> <body> <p>SVG example</p> <svg width="500" height="220"> <rect x="10" y="10" width="300" height="100" fill="gold"  stroke="black" /> </svg> </body> </html>Copy the code

SVG has these attributes:

  • Standards (like VML)
  • scalable
  • Bury in the label
  • Programmable like any other element of the DOM

Canvas 2D API

The Canvas 2D API is the most debated feature in H5. It allows developers to render 2D images in the browser and program 2D images in JS without having to rely on external plug-ins or tools. It also made many plugin-style rendering tools obsolete. It all starts with the

element, which declares an area in which you can draw images. Once you have the

element, you can get a 2D context that exposes methods that let you render various text and shapes.

Let’s look at an example:

<html>
  <body>
    <canvas id="canvas"></canvas>
  </body>  
</html>  
Copy the code

We use JS to get the canvas in the document and then request its context. The returned context is an object that implements the CanvasRenderingContext2D interface. This is the canvas rendering gateway. Then, let’s draw another golden rectangle:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'gold';
ctx.strokeStyle = 'black';
ctx.fillRect(10, 10, 200, 100);
ctx.strokeRect(10, 10, 200, 100);
Copy the code

Similar to SVG, we provide the same information: position, size, color, etc. But this is coded. The Canvas context supports these features:

  • Line style
  • Writing style
  • shadow
  • gradient
  • model
  • transform
  • hybrid
  • image
  • Pixel operations
  • state
  • Click on the hotspot
  • The filter

In general, Canvas offers all the capabilities of 2D. Many libraries and frameworks are based on the Canvas API. My favorite is the Phaser game framework.

WebGL

WebGL brings high-performance 3D and 2D apis to browsers — inspired by OpenGL, the industry-leading API protocol for interacting with Gpus. WebGL allows us to enjoy hardware-accelerated rendering. Like the Canvas 2D API, it is part of H5. A little confusing is that it also uses the

element. But it’s much more exciting than Canvas 2D, and communicating directly with the WebGL API is a tall order. I recommend using a friendly library like three.js. Three.js brings with it many concepts and capabilities that are more relevant to 3D developers:

  • Scenes scene
  • Cameras camera
  • Geometry of Geometry
  • 3D Model Loaders
  • Towns light source
  • Materials material
  • Shaders shadow
  • Particles particle
  • Animations animation
  • Math Utilities

Let’s use three.js to show a simple example

<html>
  <body>
    <script src="https://threejs.org/build/three.js"></script>
    <script>
      // Javascript will go here.
    </script>
  </body>
</html>
Copy the code

In the JS block, we add a scene, a camera, and a renderer.

var scene = new THREE.Scene(); Var camera = new THREE. PerspectiveCamera (100, window. InnerWidth/window. InnerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );Copy the code

Then, add a gold cube:

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial({ color: "gold" });
var cube = new THREE.Mesh( geometry, material );
scene.add(cube);

camera.position.z = 2;
Copy the code

Finally, get it moving:

var render = function () { requestAnimationFrame(render); Cube. Rotation. X + = 0.1; Cube. Rotation. + y = 0.1; renderer.render(scene, camera); }; render();Copy the code

You can view the effect here: Edit fiddle-jsfiddle-code Playground