前端------ canvas 繪製折線圖詳解
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 和大資料的火熱,大量的工程師蜂擁而上,爬蟲技術由於易學、效果顯著首當其衝的成為了大家追捧的物件,爬蟲的發展進入了高峰期,因此給伺服器帶來的壓力則是成倍的增加。企業或為了保證服務的正常運轉或為了降低壓力與成本,不得不使出各種各樣的技術手段來阻止爬蟲工程師們毫無節制的