Canvas Drawing Floor

Introducer

With the requirement of data center visualization system getting higher and higher, the effect of 2D and 3D is almost lifelike; compared with 2D, 3D floor is easier, which can be realized only by engine (e.g. twaver.js, three.js, etc.) plus a floor picture. This paper focuses on how to use 2D to draw floor and how to make pseudo-3D floor effect.

Be all eagerness to see it

As if thinking of sth.

If you see the above effect, you may laugh at the villain; such an effect, a picture will be solved, how can we inspire the public and make a big move? However, if you know, the shape and material of the floor of the room are not uniform, how can a picture solve it? Do you understand what I do and think?

As you can imagine, it is very easy to present the shape of the floor by giving the floor material and coordinate information. How to achieve this?

Experimental world

Canvas

HTML5 Canvas tag, should not need to say, if you do not understand this, please move. Canvas.

"Give me a Canvas and give you a wonderful world" - - Canvas, a world famous scholar

createPattern

The CanvasRenderingContext2D
.createPattern() method of the Canvas 2D API creates a pattern using the specified image (a CanvasImageSource ). It repeats the source in the directions specified by the repetition argument. This method returns a CanvasPattern .

image

CanvasImageSource to be used as image to repeat. It can either be a:

HTMLImageElement
HTMLVideoElement
HTMLCanvasElement
CanvasRenderingContext2D
ImageBitmap
Blob

repetition

DOMString indicating how to repeat the image. Possible values are:

"repeat" (both directions),
"repeat-x" (horizontal only),
"repeat-y" (vertical only), or
"no-repeat" (neither).

If repetition is an empty string ('') or null (but not undefined), repetition will be "repeat".

Example

<canvas id="canvas"></canvas>
</pre>
<pre>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 400, 400);
};

Is it very simple, as the API said, can support pictures, Canvas, Vedio, Blob and so on, so we can draw our own floor style on Canvas, then use it for filling, start perfect!?

Fill in Canvas content

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        function init() {
            var canvas = document.getElementById("bg");
            var ctx = canvas.getContext("2d");

            var tile = document.createElement('canvas');
            tile.width = 50;
            tile.height = 50;
            var tileCtx = tile.getContext("2d");
            draw(tileCtx);
            var objPattern = ctx.createPattern(tile, "repeat");
            ctx.rotate(-(Math.PI / 180) * 25);
            ctx.fillStyle = objPattern;
            ctx.fillRect(50, 300,700,400);
        }

        function draw(tileCtx) {
            var translator = new Translator3D({x:0,y:0,width:50,height:50});
            tileCtx.save();
            tileCtx.beginPath();
            tileCtx.strokeStyle = 'rgba(100,100,0,1)';        
            var point  = {x:0,y:25};
            // point = translator.translate(point.x,point.y);
            tileCtx.moveTo(point.x, point.y);
            var point  = {x:50,y:25};
            // point = translator.translate(point.x,point.y);
            tileCtx.lineTo(point.x, point.y);
            var point  = {x:25,y:0};
            // point = translator.translate(point.x,point.y);
            tileCtx.moveTo(point.x, point.y);
            var point  = {x:25,y:50};
            // point = translator.translate(point.x,point.y);
            tileCtx.lineTo(point.x, point.y);
            
            tileCtx.stroke();
            tileCtx.restore();
        }
    </script>
</head>
<body onload="init();">
    <canvas id="bg" width="1000" height="500" ></canvas>
</body>
</html>

Write this, should be very skilled in this technology, if you want to make the opening effect map, add their own creation, it is easy to achieve;

Reference material

[1].HTML5, not only looks beautiful (second shot: building the most beautiful 3D computer room)
[2].CanvasRenderingContext2D.createPattern
[3].Canvas

Posted by newbienewbie on Sat, 20 Apr 2019 20:03:34 -0700

Programmer Group