亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Canvas繪制地板

lookSomeone / 969人閱讀

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

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

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

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

實(shí)驗(yàn)天地 Canvas

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

"給我一張Canvas，還你你個(gè)精彩世界"；--世界著名學(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)該是對(duì)此技術(shù)應(yīng)該非常熟練了，若想做出開篇的效果圖，添加自己的創(chuàng)造，很容易便可實(shí)現(xiàn)；
參考資料

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/82022.html

相關(guān)文章

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

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

    cocopeak 評(píng)論0 收藏0

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

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

    sevi_stuo 評(píng)論0 收藏0

  • 打造最美HTML5 3D機(jī)房（第二季）

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

    BetaRabbit 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<