Canvas绘制地板

lookSomeone 发布于2019-08-20 15:08 / 890人阅读

摘要：导语随着数据中心可视化系统的要求越来越高，效果都要求几乎逼真地板，相较于，实为更易，只需引擎如等外加一张地板图片，便可实现本文重点介绍如何使用绘制地板以及如何做出伪的地板效果先睹为快若有所思看到如上效果，你也许会嘲笑鄙人这样的效果，一张图片

导语

随着数据中心可视化系统的要求越来越高，2D、3D效果都要求几乎逼真；3D地板，相较于2D，实为更易，只需引擎(如：twaver.js、three.js等),外加一张地板图片，便可实现；本文重点介绍如何使用2D绘制地板、以及如何做出伪3D的地板效果；

先睹为快

若有所思

看到如上效果，你也许会嘲笑鄙人；这样的效果，一张图片就解决，何以兴师动众，大动干戈；然，若您知道，房间地板的形状、材质参差不齐，如何一张图片能解决，你是否理解了我的所作所为，所思所想呢？

如你所想，这样给出地板材质和坐标信息，便很容易呈现形形状状的地板了，具体是如何实现的呢？

实验天地 Canvas

HTML5的Canvas标签，应该无需赘言, 若您对此不解，请移步Canvas.

"给我一张Canvas，还你你个精彩世界"；--世界著名学者Canvas

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

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);
};

是不是非常的简单，正如API所言，可以支持图片、Canvas、Vedio、Blob等等，因此，我们可以在Canvas上自己绘制地板样式，再用于填充，起步完美！

填充Canvas内容

写到这，应该是对此技术应该非常熟练了，若想做出开篇的效果图，添加自己的创造，很容易便可实现；

参考资料

[1].HTML5，不只是看上去很美（第二弹：打造最美3D机房）
[2].CanvasRenderingContext2D.createPattern
[3].Canvas

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82022.html

HTML5 Canvas游戏开发实战 PDF扫描版

摘要：游戏开发实战主要讲解使用来开发和设计各类常见游戏的思路和技巧，在介绍相关特性的同时，还通过游戏开发实例深入剖析了其内在原理，让读者不仅知其然，而且知其所以然。HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧，在介绍HTML5 Canvas相关特性的同时，还通过游戏开发实例深入剖析了其内在原理，让读者不仅知其然，而且知其所以然。在本书...

cocopeak 2019-04-23 14:39 评论0 收藏0
HTML5，不只是看上去很美（第二弹：打造最美3D机房）

摘要：受到大家的启发和鼓励，这个机房系列已经有了长足的进步。做应用并不是一件轻松的事。来张全景图看看接着，只要把门安上去就行了。前言最近项目开发任务告一段落，刚好有时间整理这大半年的一些成果。使用html5时间还不久，对js的认识还不够深入。没办法，以前一直搞java，对js的一些语言特性和概念一时还转换不过来。上一篇第一弹介绍了项目中做的一个彩虹爆炸图，主要用了 html5的canv...

sevi_stuo 2019-08-21 10:32 评论0 收藏0
打造最美HTML5 3D机房（第二季）

摘要：写在前面的前面现在拍电影搞真人秀都流行拍续集，哥今天给大家带来的是打造最美机房的续集，哥的目标是成为机房界的网红。机柜标签机房中最重要的物理资源机柜是机房管理规划监控人员最关注的对象之一。写在前面的前面现在拍电影、搞真人秀都流行拍续集，哥今天给大家带来的是打造最美3D机房的续集，哥的目标是成为3D机房界的网红。 -------------------------------我是这个...

BetaRabbit 2019-08-21 10:40 评论0 收藏0