于學習js是為爬蟲服務,所以canvas繪圖學習并不完整。
HTML文件中需要有canvas元素,兩標簽之間的文字是瀏覽器不支持時顯示的。
<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>
要在網頁中顯示canvas繪制的圖像,只需要在畫布上繪制圖形即可:
var drawing = document.getElementById("drawing");
if (drawing.getContext){
var context = drawing.getContext("2d");
context.fillStyle = "#0000ff";
context.fillRect(10,10,50,50);
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30,30,50,50);
}
也可以通過toDataURL輸出到圖像,并創建新的img:
var drawing = document.getElementById("drawing");
// 取得圖像的數據URI
var imgURI = drawing.toDataURL("image/png");
// 顯示圖像
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);
可通過strokeStyle和fillStyle屬性進行設置
var context = drawing.getContext("2d");
context.strokeStyle = "red";
context.fillStyle = "#0000ff";
設置屬性有以下幾種:
"red"
"#0000ff"
"rgba(0,0,255,0.5)"
context.strokeStyle = "red";
繪制矩形有fillRect(帶有填充)、strokeRect(無填充)、clearRect(除清矩形區域)三個方法,單位為像素:
var drawing = document.getElementById("drawing");
if (drawing.getContext){
var context = drawing.getContext("2d");
// 紅色的矩形
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);
// 半透明的矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30,30,50,50);
}
以beginPath()方法開始,然后接著繪制以下線條:
路徑創建完以后,有多種結尾方式:
方法:
fillText()
strokeText()
屬性:
font
textAlign start、end、left、right、center
textBaseline top、hanging、middle、alphabetic、ideographic、bottom
前沒有使用過前端java Script插件,所以一直認為很難來著,今天突然在網上搜尋了一波,21種前端java Script插件,我選擇的是Echarts。點擊打開鏈接
ECharts,縮寫來自Enterprise Charts,商業級數據圖表,一個純Javascript的圖表庫,可以流暢的運行在PC和移動設備上,兼容當前絕大部分瀏覽器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底層依賴輕量級的Canvas類庫ZRender,提供直觀,生動,可交互,可高度個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗,賦予了用戶對數據進行挖掘、整合的能力。
支持折線圖(區域圖)、柱狀圖(條狀圖)、散點圖(氣泡圖)、K線圖、餅圖(環形圖)、雷達圖(填充雷達圖)、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表,同時提供標題,詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件,支持多圖表、組件的聯動和混搭展現。
1.創建一個index.html,如下:
[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<scriptsrc="echarts.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小(寬高)的Dom -->
<divid="main"style="width: 600px;height:400px;"></div>
<scripttype="text/javascript">
// 基于準備好的dom,初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
其中需要導入echarts,這個從官網上下,尋找適合的,鏈接在上面。
2.然后通過修改上面一列的屬性,構建圖標,上述圖表如下:
擊查看瀑布特效
實話說,這不像是一個瀑布,倒像是天上下石頭,但是咱們寫代碼的,不要在意這些細節,重點是思路,邏輯,以及具體實現效果的方法。在布局方面,因為是用HTML5/canvas,所以只需要一個canvas畫布即可,也就是一行代碼:
<canvas id="canvas" width="400" height="500"></canvas>
CSS樣式也只需要大概的設置下,代碼量不多,這次的效果重點是javascript的代碼,因為都是用的原生javascript,沒有調用插件,看過我以前寫的特效的朋友就知道,我一般都強調的就是基礎的原生javascript的重要性,特別是現在各種插件以及框架流行,初學者一旦盲目的去學框架,而忽略原生javascript的話其實是很難找工作的,因為每個公司使用的插件以及框架都未必是一樣的,也未必會一直使用。但是如果你原生javascript的基礎很扎實,那么不管是什么框架或者插件,你都能在很短時間內掌握,使用,迅速創造價值,這也是很多公司喜歡的人才!萬丈高樓平地起!不多說,直接上源碼!
如果想要更多的企業求職加分項目,案例,學習方法可以來一下我的前端群570946165,每天都會精挑細選一個特效,項目出來詳細講解,分享!包括答疑解惑!
HTML5+javascript打造瀑布特效源碼:
代碼過長需要文檔版源碼來我的前端群570946165,已上傳到群文件
頭條號里有許多web前端學習視頻/源碼,企業常用特效/案例/項目,敬請關注!
這是哪?
*請認真填寫需求信息,我們會在24小時內與您取得聯系。