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
推薦閱讀: