以前在網頁中進行交互繪圖是很困難的(需要依賴額外的第三方插件),而引入的Canvas特性使得作者可以很容易的在網頁上繪制各種圖形和圖像。
Canvas提供了腳本(JavaScript)應用接口,我們可以使用JS代碼來操作畫布,添加各種圖形以及實現用戶交互。這些特性使得HTML5在開發網頁游戲和一些復雜的網頁動畫上變得更加方便。
比如下面這個例子,使用Canvas實現了簡單的在線畫板功能,你可以直接在網頁上繪制線條:
實例可訪問:http://www.ikinsoft.com/3ddemo/Canvas.html
效果圖如下:
實際上Canvas規范包含兩個部分,一個是HTML5新引入的canvas元素,還有更為關鍵的2D渲染上下文。實際上前者只是一個容器,后者才是真正繪圖的地方。它包含繪圖和圖形操作所需要的全部方法和豐富功能。 強調一下:繪圖是在2D渲染上下文中進行的,而不是在canvas元素中進行。可以通過canvas元素訪問和顯示2D渲染上下文。
canvas元素的語法很簡單,除了id和class外,還有兩個和容器尺寸相關的屬性:寬和高。
<canvas id="myCanvas" height="500" width="500"></canvas>
我們接下來先搞清楚2D渲染上下文的用法。
canvas元素并非Canvas中最強大的部分,真正的關鍵部分是2D渲染上下文,這是你真正繪制圖形的地方。canvas元素的用途只是作為2D渲染上下文的包裝器,它包含繪圖和圖形操作所需要的全部方法和豐富功能。理解這一點是很重要的,強調一下:繪圖是在2D渲染上下文中進行的,而不是在canvas元素中進行。可以通過canvas元素訪問和顯示2D渲染上下文。
坐標系統
2D渲染上下文是一種基于屏幕的標準繪圖平臺。與其他的2D平臺類似,它采用平面的笛卡兒坐標系統,左上角為原點(0,0)。向右移動時,x坐標值會增加;向下移動時,y坐標值會增加。如果你想把圖形繪制到正確的位置上,一定要理解這個坐標系統。
坐標系統的1個單位通常相當于屏幕的1個像素,所以位置(24,30)是向右24像素和向下30像素的位置。有時候坐標系統的1個單位相當于2個像素(例如,在一些高分辨率顯示器中),但是一般的經驗法則是1個坐標單位等于1個屏幕像素。
訪問2D渲染上下文
我們先創建只有一個空白canvas元素的簡單HTML網頁:
<canvas id="myCanvas" width="200" height="200">
<!-- Insert fallback content here -->
</canvas>
在這個例子中,我們將這個canvas元素賦值給一個變量,然后再通過調用getContext方法將得到的2D渲染上下文賦給另一個變量。 必須強調一點,由于我們使用了jQuery,所以需要調用get方法才能訪問DOM中的canvas元素,然后才能夠訪問Canvas的getContext方法。
有了包含2D渲染上下文的變量之后,就可以開始繪制圖形了。在上下文變量聲明語句之后添加下面這行代碼:
context.fillRect(0,0,200,200);
完整的JS代碼如下:
上述代碼將在畫布上繪制如下的一個黑色矩形,從坐標(0,0)處開始,長寬均為200px:
這個矩形是黑色的,因為Canvas所繪制元素的默認顏色是黑色。
者:阿山
轉發連接:https://segmentfault.com/a/1190000022535264
天給大家分享一個不錯的Vue構建Canvas畫板Vue-SketchPad。
vue-sketchpad 基于 vue.js+fabric.js 構建的web畫板。支持畫箭頭、虛線、圓形、文字、刪除、撤銷重做及清除畫板等功能。
# 克隆項目
git clone https://github.com/HWcool/vue-sketchpad.git
# 進入項目
cd vue-sketchpad
# 安裝依賴
npm install
# 本地開發
npm run div
# 打包
npm run build
fabric.js 就是針對canvas繁瑣的API進行的一系列封裝操作,而且現在這個庫還在維護中。在github上start高達16.7K+。
# fabric.js 高級畫板
https://www.cnblogs.com/vipstone/p/8716419.html
# 官網
http://fabricjs.com/
# github地址
https://github.com/fabricjs/fabric.js
最后附上項目地址,需要的朋友不可錯過。
# 倉庫地址
https://github.com/HWcool/vue-sketchpad
ok,就介紹到這里。如果能對大家有所幫助的話,記得多支持一下哈~
*請認真填寫需求信息,我們會在24小時內與您取得聯系。