成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Canvas繪制地板

lookSomeone / 904人閱讀

摘要：導(dǎo)語隨著數(shù)據(jù)中心可視化系統(tǒng)的要求越來越高，效果都要求幾乎逼真地板，相較于，實為更易，只需引擎如等外加一張地板圖片，便可實現(xiàn)本文重點介紹如何使用繪制地板以及如何做出偽的地板效果先睹為快若有所思看到如上效果，你也許會嘲笑鄙人這樣的效果，一張圖片

導(dǎo)語 
隨著數(shù)據(jù)中心可視化系統(tǒng)的要求越來越高，2D、3D效果都要求幾乎逼真；3D地板，相較于2D，實為更易，只需引擎(如：twaver.js、three.js等),外加一張地板圖片，便可實現(xiàn)；本文重點介紹如何使用2D繪制地板、以及如何做出偽3D的地板效果；
先睹為快

若有所思 
看到如上效果，你也許會嘲笑鄙人；這樣的效果，一張圖片就解決，何以興師動眾，大動干戈；然，若您知道，房間地板的形狀、材質(zhì)參差不齊，如何一張圖片能解決，你是否理解了我的所作所為，所思所想呢？

如你所想，這樣給出地板材質(zhì)和坐標(biāo)信息，便很容易呈現(xiàn)形形狀狀的地板了，具體是如何實現(xiàn)的呢？

實驗天地 Canvas

HTML5的Canvas標(biāo)簽，應(yīng)該無需贅言, 若您對此不解，請移步Canvas.

"給我一張Canvas，還你你個精彩世界"；--世界著名學(xué)者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內(nèi)容 



    
    


    



寫到這，應(yīng)該是對此技術(shù)應(yīng)該非常熟練了，若想做出開篇的效果圖，添加自己的創(chuàng)造，很容易便可實現(xiàn)；
參考資料

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82022.html

相關(guān)文章

  • HTML5 Canvas游戲開發(fā)實戰(zhàn) PDF掃描版

    摘要：游戲開發(fā)實戰(zhàn)主要講解使用來開發(fā)和設(shè)計各類常見游戲的思路和技巧，在介紹相關(guān)特性的同時，還通過游戲開發(fā)實例深入剖析了其內(nèi)在原理，讓讀者不僅知其然，而且知其所以然。HTML5 Canvas游戲開發(fā)實戰(zhàn)主要講解使用HTML5 Canvas來開發(fā)和設(shè)計各類常見游戲的思路和技巧，在介紹HTML5 Canvas相關(guān)特性的同時，還通過游戲開發(fā)實例深入剖析了其內(nèi)在原理，讓讀者不僅知其然，而且知其所以然。在本書...

    cocopeak 評論0 收藏0

  • HTML5，不只是看上去很美（第二彈：打造最美3D機房）

    摘要：受到大家的啟發(fā)和鼓勵，這個機房系列已經(jīng)有了長足的進步。做應(yīng)用并不是一件輕松的事。來張全景圖看看接著，只要把門安上去就行了。 前言 最近項目開發(fā)任務(wù)告一段落，剛好有時間整理這大半年的一些成果。使用html5時間還不久，對js的認(rèn)識還不夠深入。沒辦法，以前一直搞java，對js的一些語言特性和概念一時還轉(zhuǎn)換不過來。 上一篇第一彈介紹了項目中做的一個彩虹爆炸圖，主要用了 html5的canv...

    sevi_stuo 評論0 收藏0

  • 打造最美HTML5 3D機房（第二季）

    摘要：寫在前面的前面現(xiàn)在拍電影搞真人秀都流行拍續(xù)集，哥今天給大家?guī)淼氖谴蛟熳蠲罊C房的續(xù)集，哥的目標(biāo)是成為機房界的網(wǎng)紅。機柜標(biāo)簽機房中最重要的物理資源機柜是機房管理規(guī)劃監(jiān)控人員最關(guān)注的對象之一。 寫在前面的前面 現(xiàn)在拍電影、搞真人秀都流行拍續(xù)集，哥今天給大家?guī)淼氖谴蛟熳蠲?D機房的續(xù)集，哥的目標(biāo)是成為3D機房界的網(wǎng)紅。 -------------------------------我是這個...

    BetaRabbit 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<