前端------ canvas 繪製折線圖詳解

阿新 • • 發佈：2019-01-14

canvas時html5新新增的一個畫布標籤。

他有很多屬性，大家可以在下邊網址檢視：

畫布canvas中涉及到座標運算，它是以瀏覽器空白左上角為起點，然後根據畫素進行變化的一個元素，話不多說，下邊是一個折線圖的demo：

效果圖如下：

原始碼：

<!DOCTYPE html>
<html>
	<head>
		<title>只屬於你的折線圖！</title>
	</head>
	<body style="background-color:#f3f3f3"> 
		<canvas id="canvas" width=1000 height=650></canvas>
		<script>
			var canvas = document.getElementById("canvas");
			var startX = 100;
			var startY = 600;
			var ctx = canvas.getContext('2d');
			var data = [0,100,200,300,400,500];		//座標軸座標
			var point = [[100,200],[150,230],[200,190],[250,240],[300,300],[350,270],[400,500],[450,400],[500,100]];	//點座標
			//建立座標系
			function creat(){
				ctx.beginPath();
				ctx.moveTo(startX,50);
				ctx.lineTo(startX,startY);
				ctx.moveTo(startX,startY);
				ctx.lineTo(650,startY);
				ctx.closePath();
				ctx.stroke();

			}
			//填充橫縱座標
			function insert(){
				var x = 100;
				var y = 600;
				//繪製橫座標
				for(var i in data){
					ctx.fillText(data[i],x,y+20);
					x += 100;
				}
				x = 100;
				y = 600;
				//繪製縱座標
				for(var i in data){
					ctx.fillText(data[i],x-20,y);
					y -= 100;
				}
			}
			//繪製折線
			var num = 0;
			var sh = setInterval(function(){
				//只有第一個點重新開始繪製
				if(num == 0)
					ctx.beginPath();
				//終止
				if(num == 8){
					clearInterval(sh);
				}
				var x = point[num][0];
				var y = point[num][1];
				//轉換座標
				x += 100;
				y = startY - y;
				ctx.arc(x,y, 2, 0, 2*Math.PI);
				//進行點的內部連線
				if(num != 0)
					ctx.lineTo(x,y);
				num++;
				ctx.moveTo(x,y);
				ctx.strokeStyle = "#3FA7DC";
				//連線邊框
				ctx.stroke();
				console.log(num);
			}, 400);
			creat();
			insert();
		</script>
	</body>
</html>

前端------ canvas 繪製折線圖詳解

canvas時html5新新增的一個畫布標籤。他有很多屬性，大家可以在下邊網址檢視：畫布canvas中涉及到座標運算，它是以瀏覽器空白左上角為起點，然後根據畫素進行變化的一個元素，話不多說，下邊是一個折線圖的demo：效果圖如下：原始碼： <!

繪製UML圖詳解

https://blog.csdn.net/shift_wwx/article/details/79205187 一、前言在軟體開發過程中會經常整理文件，不是所有的資訊都可以通過文字來表達，而換成圖之後會更加的直觀、有效，其中頻繁使用的就是UML圖。結合自己實踐總結一下，希望對大家都能有所

前端以canvas實現驗證碼詳解

前端實現驗證碼生成實現此功能，可以先拆分出驗證碼有以下要素：隨機凌亂字元生成隨機的背景色調隨機出現的遮擋線與點要實現此功能我們可以使用css3中canvas元素，通過js我們可以非常簡單的實現前端生成驗證碼。下面讓我們逐項實現我們先在

Canvas畫布繪製折線圖

<head> <meta charset="utf-8" /> <title></title> <style type="text/css"> canvas { border: 1p

Android 自定義控制元件-Canvas和Paint繪圖詳解-手把手帶你繪製一個時鐘.

,Android - Paint基礎在自定義控制元件時，經常需要使用canvas、paint等，在canvas類中，繪畫基本都是靠drawXXX()方法來完成的，在這些方法中，很多時候都需要用到paint型別的引數， Paint作為一個非常重要的元素,功能

利用 html5 canvas 簡單繪製折線圖

<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>畫圖</title> <style> #divC

html5 canvas 實現簡單繪製折線圖

<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>畫圖</title&g

HTML5 Canvas絢麗的小球詳解

.com demo ack doc scrip 情況技術顏色 htm 實例說明：實例使用HTML5+CSS+JavaScript實現小球的運動效果掌握Canvas的基本用法技術要點：從需求出發分析Demo要實現的功能擅於使用HTML5 Canvas 參

(轉)oracle視圖詳解

子句 col 安全性沒有 pil 重新編譯語法錯誤相關 his Oracle視圖詳解一. 視圖的定義視圖(view)，也稱虛表, 不占用物理空間，這個也是相對概念，因為視圖本身的定義語句還是要存儲在數據字典裏的。視圖只有邏輯定義。每次使用的時候,只是重新執行S

達內-靜態路由與浮動靜態路由-（配圖詳解版）

達內-靜態路由與浮動靜態路由-（配圖詳解版）路由：不同網段之間的通信，稱之為“路由”。實現：路由設備：路由器，多層交換機本質：通過查詢“路由表”實現“不同網段之間的路由功能”。路由器的工作原理： 1、路由器僅僅關心數據中的 “ 目標IP 地址” ； 2、路由器提取目標IP

canvas特效代碼詳解（2）

text pre javascrip css png tco border src null canvas是一個就基於像素的畫圖h5元素。利用canvas做一個如下描述所示的動態圖形：當鼠標點下去時開始繪圖，在鼠標結束時完成一個矩形，當再一次點擊時重復第一次的繪圖步驟

UML類圖詳解_關聯關系_多對多

col c++代碼一個 image 技術 pub 每一個 push_back cnblogs 在關聯關系中，很多情況下我們的多重性並不是多對一或者一對多的，而是多對多的。不過因為我們要考慮裏面的導航性，如果直接搞的話就是需要去維護兩群對象之間多對多的互指鏈接，這就

UML類圖詳解_聚合關系

聚合分享產生 .com 特殊 begin blank .html 表達結合UML關系，以看臺和基金來介紹聚合關系 aggregation，是一種特殊的關聯關系，既有關聯關系的特質，還獨有“整體 —— 部分（whole &md

useradd思維導圖詳解

play left 技術分享 .cn 用戶 order inux ont pla useradd思維導圖詳解本思維導圖，用來說明Linux的的用戶和群組的詳細關系。 Xmind文件和預覽圖：思維導圖文件用Xmind軟件打開，下載鏈接：useradd詳解.rar 預覽圖：

大前端完整學習路線（詳解）

電子商務 backbone linu 請求響應查詢設置 lob 服務端 php 第一階段： HTML+CSS: HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎： Js基礎教程、js內置對象常用方法、常見DOM樹

Oracle物化視圖詳解

zed 增量建立存在表名 row $$ dbm 數據現實工作中會有多個數據源同步到一個數據庫完成數據分析的場景，這些數據可以不是實時同步的，我們一般通過定時任務抽取數據到統計分析庫給應用使用。一般的同步方式可以通過時間戳做全量和增量數據同步（存在原數據變化可能，數

【Oracle】Oracle Database 12c Release 2安裝多圖詳解

Oracle12c2版數據庫安裝1.1 下載安裝包 oracle官網地址請自行百度oracle，51CTO內容限制不讓我放！1)打開官方網站，找到下載連接，如圖所示。2)選擇更多下載。3)選擇數據庫版本，這裏選擇的是目前的最新版本4)接收許可協議，選在linux版本進行下載5) 接收許可協議，點擊linuxx

Oracle數據庫的安裝【超詳細的文圖詳解】

ech passwd pat 適用於下載當前 play 領域 .so Oracle簡介Oracle Database，又名Oracle RDBMS，或簡稱Oracle。是甲骨文公司的一款關系數據庫管理系統。它是在數據庫領域一直處於領先地位的產品。可以說Oracle數據庫

MFC如何畫餅圖詳解

有個畫扇形的API，但是現在先不解釋，因為不懂畫餅圖的原理，你也不懂怎麼用。接下來就一步步帶大家去計算餅圖的扇形兩點座標。直接看下圖，文字解釋總是太抽象。接下來就是用Pie這個函式來畫出扇形了。其原型如下： BOOL Pie( LPCRECT lpRect,

【動圖詳解】通過 User-Agent 識別爬蟲的原理、實踐與對應的繞過方法

開篇隨著 Python 和大資料的火熱，大量的工程師蜂擁而上，爬蟲技術由於易學、效果顯著首當其衝的成為了大家追捧的物件，爬蟲的發展進入了高峰期，因此給伺服器帶來的壓力則是成倍的增加。企業或為了保證服務的正常運轉或為了降低壓力與成本，不得不使出各種各樣的技術手段來阻止爬蟲工程師們毫無節制的

前端------ canvas 繪製折線圖詳解

相關推薦