整合營銷服務商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          輕輕松松學會用JavaScript操作Html中的c

          輕輕松松學會用JavaScript操作Html中的canvas畫布(一)

          天學習了html5里面的canvas(畫布),canvas是一個矩形區(qū)域的畫布,可以用javascript直接在上面畫畫,控制上面的元素,他擁有很多的繪圖路徑,矩形,圓形,字符以及添加圖像的方法,它使得頁面更加豐富多彩。

          下面來看看怎么使用這個神奇的標簽。

          它在html頁面里面是這樣的樣子,可以直接在上面設置畫布的大小,邊框等屬性

          這里提一下,最好在javascript里面設置canvas的寬高,也不要通過css設置canvas寬高,因為使用css來設置,畫布的實際大小為(css設置的值)/(js設置的值)倍。

          下面正式開始畫畫了。

          第一步:拿到canvas標簽,同時設置他的屬性

          然后就可以第二步拿到canvas的上下文,并且選擇2D/3D畫圖

          準備好了就可以開始畫畫了,我們先來畫線吧

          可以想象拿著一支筆,先把筆尖移到開始繪畫的點,然后開始移動筆。

          不過現(xiàn)在的線條還看不見,現(xiàn)在只是有個印,我們還需要讓他顯現(xiàn)出來。

          那么如果我想把他再把它閉合起來并且有填充的顏色。除了手動閉合還可以用到closePath來自動閉合,填充則用fill方法了。

          記住:先把路徑畫好了才可以去描邊,填充,不然就會是在用想象力畫畫,紙上面是不會顯示的。

          下面再來畫個表格

          以上就是最基礎的畫圖操作啦,如果有什么疑問或者建議可以在下方評論,喜歡小編的文章就給個關注啦~~

          節(jié)主要簡單講解canvas、svg、地理定位和新語義元素

          HTML 5 Canvas

          canvas 元素用于在網(wǎng)頁上繪制圖形。HTML5 的 canvas 元素使JavaScript 在網(wǎng)頁上繪制圖像。畫布是一個矩形區(qū)域,您可以控制其每一像素。canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

          <canvas id="myCanvas" width="200" height="100"></canvas>

          canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成:

          <script type="text/javascript">

          var c=document.getElementById("myCanvas");

          var cxt=c.getContext("2d");返回一個用于在畫布上繪圖的環(huán)境,目前僅支持2d,

          cxt.fillStyle="#FF0000";//染成紅色

          cxt.fillRect(0,0,150,75);//fillRect 方法規(guī)定了形狀、位置和尺寸

          </script>

          VvvebJs是一個開源的網(wǎng)頁拖拽自動生成的JavaScript庫,你可以以簡單拖拽的方式生成自己需要的網(wǎng)頁樣式,內置jquery和Bootstrap,你可以拖拽相關的組件進行網(wǎng)頁的構建,非常的方便,而且可以實時修改代碼,功能豐富,使用簡單,界面友好,特別適合一些專注于展示的網(wǎng)頁設計,需要的朋友不可錯過!



          Github地址

          https://github.com/givanz/VvvebJs

          相關特性

          • 1、組件和塊/片段拖放。
          • 2、撤銷/重做操作。
          • 3、一個或兩個面板界面。
          • 4、文件管理器和組件層次結構導航添加新頁面。
          • 5、實時代碼編輯器。
          • 6、包含示例php腳本的圖像上傳。
          • 7、頁面下載或導出html或保存頁面在服務器上包含示例PHP腳本。
          • 8、組件/塊列表搜索。
          • 9、Bootstrap 4組件等組件

          默認情況下,編輯器附帶Bootstrap 4和Widgets組件,可以使用任何類型的組件和輸入進行擴展。

          使用方式

          如下代碼:

          <!-- jquery-->
          <script src="js/jquery.min.js"></script>
          <script src="js/jquery.hotkeys.js"></script>
          <!-- bootstrap-->
          <script src="js/popper.min.js"></script>
          <script src="js/bootstrap.min.js"></script>
          <!-- builder code-->
          <script src="libs/builder/builder.js"></script>	
          <!-- undo manager-->
          <script src="libs/builder/undo.js"></script>	
          <!-- inputs-->
          <script src="libs/builder/inputs.js"></script>	
          <!-- components-->
          <script src="libs/builder/components-bootstrap4.js"></script>	
          <script src="libs/builder/components-widgets.js"></script>	
          <script>
          $(document).ready(function() 
          {
          	Vvveb.Builder.init('demo/index.html', function() {
          		//load code after page is loaded here
          		Vvveb.Gui.init();
          	});
          });
          </script>
          

          要初始化編輯器,調用Vvveb.Builder.init。第一個參數(shù)是要加載以進行編輯的URL,它必須位于相同的子域中才能進行編輯。第二個參數(shù)是頁面加載完成時調用的函數(shù),默認情況下調用編輯器Gui.init();


          • 結構


          Component Group是一個組件集合,例如Bootstrap 4組由Button和Grid等組件組成,該對象僅用于在編輯器左側面板中對組件進行分組。例如,Widgets組件組只有兩個組件視頻和地圖,并被定義為如下

          Vvveb.ComponentsGroup['Widgets']=["widgets/googlemaps", "widgets/video"];
          

          Component是一個對象,它提供可以在畫布上放置的html以及在選擇組件時可以編輯的屬性,例如Video Component,具有Url和Target屬性的html鏈接Component定義為:


          Vvveb.Components.extend("_base", "html/link", {
           nodes: ["a"],
           name: "Link",
           properties: [{
           name: "Url",
           key: "href",
           htmlAttr: "href",
           inputtype: LinkInput
           }, {
           name: "Target",
           key: "target",
           htmlAttr: "target",
           inputtype: TextInput
           }]
          });
          

          在Component屬性集合中使用Input對象來編輯屬性,例如文本輸入,選擇,顏色,網(wǎng)格行等。例如,TextInput擴展Input對象并定義為:

          var TextInput=$.extend({}, Input, {
           events: {
           "keyup": ['onChange', 'input'],
          	 },
          	setValue: function(value) {
          		$('input', this.element).val(value);
          	},
          	
          	init: function(data) {
          		return this.render("textinput", data);
          	},
           }
          );
          

          輸入還需要一個在編輯器html(在editor.html中)定義為<script>標簽的模板,其id為vvveb-input-inputname,例如對于文本輸入為vvveb-input-textinput,定義:


          <script id="vvveb-input-textinput" type="text/html">
          	
          	<div>
          		<input name="{%=key%}" type="text" class="form-control"/>
          	</div>
          	
          </script>
          

          以上是借助瀏覽器翻譯工具,對官網(wǎng)的文檔進行簡單的翻譯,可能會有些不夠準確的地方,感興趣的小伙伴可以直接查看相關文檔!

          設計界面預覽






          總結

          VvvebJs是一個非常強大的網(wǎng)頁可視化生成構建工具,讓不懂網(wǎng)頁設計的小伙伴們也能夠通過拖拽來生成美觀大方的網(wǎng)頁出來,讓設計網(wǎng)頁就像設計圖片一樣,VvvebJs特別適合展示型網(wǎng)頁,甚至可以不需要代碼就能完成一項復雜的網(wǎng)頁設計,總體來說,VvvebJs是一個值得嘗試的工具!


          主站蜘蛛池模板: 国产另类ts人妖一区二区三区| 三上悠亚日韩精品一区在线| 一区二区三区四区视频在线| 国产精品高清一区二区人妖| 黑人大战亚洲人精品一区| 国产一区二区不卡老阿姨| 亚洲国产美国国产综合一区二区| 国产一区二区在线|播放| 日本高清一区二区三区| 农村乱人伦一区二区| 中文字幕国产一区| 日韩视频在线观看一区二区| 一区二区三区在线观看| 麻豆高清免费国产一区| 久久精品国产第一区二区三区| 伊人色综合一区二区三区| 中文字幕一区二区三区四区| 性色AV 一区二区三区| 无码人妻久久一区二区三区蜜桃 | 久久久无码一区二区三区| 中文字幕一区二区三区日韩精品 | 国产日本亚洲一区二区三区| 乱子伦一区二区三区| 肉色超薄丝袜脚交一区二区| 色一乱一伦一图一区二区精品| 亚洲AV本道一区二区三区四区| 日韩一区二区久久久久久| 亚洲国产老鸭窝一区二区三区| 在线观看亚洲一区二区| 99久久人妻精品免费一区| 中文字幕av人妻少妇一区二区| 中文字幕av人妻少妇一区二区 | 国产综合精品一区二区三区| 中文字幕在线无码一区二区三区| 亚洲中文字幕无码一区二区三区 | 国产一区二区在线观看app| 国产一在线精品一区在线观看| 亚洲av无码一区二区三区不卡| 精品三级AV无码一区| 在线|一区二区三区| 一区二区在线视频观看|