canvas可以替代html與css了嗎?

前幾天和朋友聊天的時候得知,現在的前端頁面可以不使用html布局,css樣式,整個頁面只有一個canvas標籤,頁面中的各個元素,包括事件,全部由canvas來渲染,現在htlm5的發展已經這麼強大了嗎?如果上面這個情況真的已經可以實現了,有沒有成熟的產品或者demo可以看到?


如果canvas能代替html/css,那麼html/css從一開始就不會出現。因為屏幕就是一個大canvas,上面的一切都是「畫」出來的,就是因為有時候「畫」太麻煩,才出現了html/css,用來「寫」。不過這麼說的話canvas確實可以取代html/css,因為理論上你可以在canvas上重新實現一套布局引擎,要不就叫 【H五C三插ML】 吧,這樣的話你就可以再也不用html/css了。


AJAX + DOM API可以代替HTML和CSS了。

Flash可以代替HTML和CSS了。

…………

…………

然並卵,,,,,


作為一個幾年來一直從事Canvas開發相關的開發者,簡單的談一下找個問題。 樓上的各位有些言論不免武斷。

首先Canvas是晚於 html和css出現的,它的出現是為了彌補瀏覽器沒有較為底層的繪圖API的缺點。基於圖形,圖像的應用(例如遊戲)以往只能藉助於Flash(Flex)這樣的插件來實現。具體再細分無外乎2D和3D,這就不展開了。這就是目前Canvas的定位。

計算機展現的一切內容都離不開繪圖,瀏覽器的DOM渲染也是繪圖。既然都是繪圖,Canvas能不能取代html和css呢?理論上是可以的,也有很多開源的項目在做這樣的事情。這裡要考慮需求和實現方案的取捨。首先要說的是,完整實現DOM渲染是沒有意義的。因為這是瀏覽器的核心功能之一,基於瀏覽器提供的有限的Canvas繪圖API是實現瀏覽器的完整渲染功能,真的很難,也沒必要。

很多基於Canvas的應用,還是有渲染DOM的需求的,比如表格繪製,頁面局部截圖,演示軟體或者電子白板類似的應用動態的拖拽某些內容,組件進來渲染。我們在開發基於Canvas的應用的時候,是希望所有元素都能直接繪製到畫布上的,因為其他HTML元素只能通過translate類似的方式和畫布繪製的元素的元素進行配合,這裡事件處理需要單獨控制。無法解決的問題是層級問題,其他元素要麼在畫布上,要麼在畫布下,是沒辦法同級的。 拖拉拽,同步動畫等操作,都需要兩套實現,所以此時繪製DOM的需求就很強烈。 但是瀏覽器一直沒有提供獲取dom渲染結果的介面,很是遺憾。

至於替代,談不上。不是所有應用都要用Canvas的,但是所有應用都要用DOM。很多東西,一句聲明性的 html就搞定了,而不是幾百行的命令式的Canvas繪圖API的調用。

找最適合自己的解決方案。


當年HTML在RIA界被Flash欺負得沒脾氣,好不容易培養個親兒子Canvas,把Flash趕走了,你現在說Canvas要佔老子的窩,我只能說這劇情太狗血了……這個事倫理上不會,技術上也不會。


canvas 是畫布,什麼叫畫布,就是專精於圖形、動畫、遊戲、擬真場景、3D……畫布發明出來不是用來替代 HTML 的,用畫布來實現正常 HTML 乾的事,就是大炮打蚊子,不光大材小用,而且打得不準。


不能

用canvas去實現html和css的功能,相當於在瀏覽器里做一個瀏覽器的模擬器

完全吃飽了撐著

別胡思亂想,給大腦留點營養思考該學習的東西


你那幾個朋友的技術水平是不是也太差了點

這會去用unity3d 開發一個閱讀類應用嗎?能做是一回事,是不是最優方案又是一回事。


看來js不僅僅把所有東西都造了一遍,還打算把瀏覽器自己也造一遍。

真有意思。


渲染時你得處理視覺吧

處理視覺不能沒有規範吧,不能每個元素都是新造出來的吧

你得寫個規範,制定一個樣式配置表標準吧

於是你得實現一套處理樣式配置的東西吧

然而這不就是現在的css在做的事嗎

然後canvas畫布上點擊等事件得有響應吧

你得寫一個事件管理器吧

管理事件的模型你準備怎麼寫呢?坐標解析?

然而這不就是現在的dom機制嗎?

於是你繞了一個大彎把現有的輪子重造了一遍,性能還更差

所以canvas的適用場景還是很少


明顯的,這個疑問是沒多大意義的。

canvas和HTML5的關係是來說,canvas是HTML5裡面的一個標籤而已,他們的關係是包含關係。

canvas是畫布,基本來說就是可以用JavaScript來操作的點陣圖,因此canvas的作用傾向於處理圖形圖像的。主要用來製作遊戲、圖表、模擬器等等。

首先題主的這個問題來看,是認為現在一個頁面上的所有信息、交互、時間都可以用canvas來實現,一定理論角度來講,大部分是可以實現的。

然而從其他角度來講完全是件扯淡的事嘛。

首先來說,一個頁面是渲染出來的過程是瀏覽器先解析DOM Tree和CSS樣式,然後根據樣式渲染頁面。

如果是用canvas來實現一個前端頁面,從性能和效率來說是非常低的。

從開發效率來說的話,也是加大工作量的,很多原本很簡單的小功能估計都要寫一大堆函數吧。

所以canvas有他自己該乾的是,很多東西不是可以就行,而是要講究適合,最佳實踐聽說過沒有。


可以,Flipboard 在今年二月份就已經在用了,主要的考慮就是,DOM 太重了,在手機上更是格外的慢。Canvas 在移動平台有很好的硬體加速支持,可以做出很多酷炫的交互效果,同時在大多數手機上流暢運行。

代價當然也是有的,有很多基礎性的輪子要重新造一遍,遇到坑的話,Android 可以自己帶一個render engine,iOS 上就只能等(並不靠譜的)蘋果來修復了。

參考:60fps on the mobile web


在下認為,要是硬說的話,真的可以只選其一做一個產品出來,不過大家依然將其看做互補關係.

HTML + CSS 依然是 Web 做傳統界面相當不錯的實踐,方便快捷維護性不錯,十分成熟. 使用成本和用人成本比 Canvas 低不少,這樣才能撐起大業務量.

Canvas 做界面,對於產品與自身來講,既然大多數目標用更方便的 HTML 可以實現,那就不會考慮 Canvas,當然特定領域是無法取代的,比如複雜圖標、遊戲場景等特徵,或者形態比較奇怪的產品.

在考慮現實因素時,一般不會輕易使用一個東西完全取代另一個東西.

正好這兩天做完一個項目,Canvas + HTML 互惠互利,界面展示 HTML,核心邏輯 Canvas. 核心邏輯使用 HTML 做起來很麻煩,性能也很差;界面用 Canvas 也很麻煩,還是 HTML 的 VM 方便 _(:3」∠)_

夏日繪板!來畫像素畫!- 嗶哩嗶哩直播,二次元彈幕直播平台


參考國內的Egret引擎,他們用xml來封裝canvas組件,其實這也不算創新了,源於Adobe的Flex


你說代替SVG我還信


隱約記得,canvas 其實就是瀏覽器渲染時候調用的。瀏覽器通過 html 和 css 等等布局組合好了以後,調用內部的畫板在屏幕上面畫。

其實實現了 canvas 的瀏覽器,就是通過標準,開放了本來沒有開放的 api,讓開發人員可以更好的控制瀏覽器的行為,創造了更多的可能性吧。

所以我認為,不存在取代與否。


現在是不可能的,單從瀏覽器渲染上看,canvas 還是很差的,特別是在手機上.


等一下,要替代也是webgl來替代啊(手動滑稽)

這也是要看應用場景的

應用類:大量的線框圖,表格等,適合html+css

遊戲類:大量素材,動畫的渲染,適合用引擎,如白鷺cocos2dx等,底層實現就是canvas

題注要說demo的話,隨便找點h5遊戲看源碼,大部分都是canvas實現的

當然可以用html+css來寫遊戲啊,但沒這必要嘛( ??ω?? )

強大的話還倒不至於,時代發展必然的產物而已。

推薦個插件html2canavs,雖然是3年前的產物:niklasvh/html2canvas,作用是把頁面轉化成圖片。


canvas 在 老舊電腦上會卡死的,散熱在不好點直接關機了,動不動60FPS老爺機受不了


那就要看canvas的庫好不好用了


幫我用canvas開發一個類淘寶網,可行性大不


不能


canvas和html+css應該會處於長期並行的狀態,兩者幾乎是互補關係。做東西的渲染模式也不一樣,一個組幀渲染,一個觸發渲染。做遊戲canvas合適,做應用html+css合適。

如果非要取代,也不是不可以。樓上有人提過u3d做應用,還真有團隊那麼干。隨著移動端的硬體性能提升,為一些團隊用canvas取代html+css提供了前提條件。

看問題不能只從程序的角度去看,我的觀點是兩者並行,至少會持續到2020年,甚至更長。


之前關注過這個:barmalei/zebra · GitHub


推薦閱讀:

TAG:前端開發 | HTML5 | Canvas |