Ⅰ 如何利用js獲取canvas里的圖形
獲取坐標，將坐標push進一個儲存數組，下次需要使用的時候調用數組，取出數據，畫線條就行了
Ⅱ canvas怎麼根據坐標獲取上面的內容
思路是這樣的，把繪制的每個區域抽象成單獨的對象，每個對象中可以儲存各自的信息(比如title, content, position等)，每個對象中都包含各自的判斷點是否在當前對象區域內的判斷函數，這樣就可以知道點到了哪個對象，也可以拿到對象內的數據， 觸發相應的事件。
這樣說可能不太直觀，你可以看一下我封裝好的一個庫。
https://github.com/PengJiyuan...
用這個庫做的一個圖表
https://github.com/PengJiyuan...
Ⅲ html5 canvas繪圖有什麼用
canvas能做什麼?
canvas是HTML5中的新元素，你可以使用javascript用它來繪制圖形、圖標、以及其它任何視覺性圖像。它也可用於創建圖片特效和動畫。如果你掌握了完整的命令，你可以用canvas創建豐富的web應用程序。如果你想很好的使用canvas，你首先應該很好的掌握javascript。
這篇文章是一篇基礎教程，你能了解一些設計方法。比如用HTML5 canvas 進行圖形設計。
用HTML5 canvas設計
設計和開發一個web頁面會包含很多的內容，用戶首先需要有一個支持HTML canvas的瀏覽器。
首先創建一個HTML5文檔頁面，設置document type是HTMl5的；
其次在頁面body區域添加一個canvas標簽：
<canvas></canvas>
第三、給這個canvas定義一個id屬性，這樣方便我們在js中調用它。添加一個寬和高屬性，在canvas標簽中添加一個當瀏覽器不支持的時候顯示給用戶的內容。下面是列子代碼：
<canvas id="canvastest" width="500" height="600">
<p>你的瀏覽器不支持HTML5 canvas,請更新您的瀏覽器！</p>
</canvas>
現在我們創建了一個包含HTML5 canvas 元素的空白畫布，我們將使用js和canvas元素的方法來創建我們的圖像。
添加一個javascript用HTMl5 canvas的方法：
var canvasTest=document.getElementById('canvastest');//獲取canvas元素；
var testcontext=canvasTest.getContext('2d');
使用javascript來創建你的畫布，你可以使用矩形、圓圈和三角形,並使用線、幻燈片和漸變來創建你的設計。
下面是完成的代碼：
var canvasTest=document.getElementById('canvastest');
var testcontext=canvasTest.getContext('2d');
// create rectangle
testcontext.fillStyle='rgb(0,125,125)';
testcontext.fillRect(10,10,250,180);
// create circle
testcontext.beginPath();
testcontext.arc(300, 340, 100, 0, Math.PI * 2, true);
testcontext.closePath();
testcontext.fillStyle='rgb(75,10,125)';
testcontext.fill();
testcontext.stroke();
我們可以將上面的代碼加入window.onload，或者jQuery的ready方法里，當文檔載入完，將會創建文明的圖形。
一些HTML5 canvas 圖像解決方案
用與HTML5 Canvas元素你可以開發動態繪圖對象比如如可視化信息或數據圖。HTML5 canvas 可以在javascript的幫助下很容易的繪制二維圖形。讓我們來看一下HTML5 canvas元素的一些數據圖應用。
1. HumbleFinance
HumbleFinance是用js開發的一個開源的數據可視化圖表，它用HTML5 canvas生成可視化圖表數據，它可以用一個軸來展示任何兩個二維的數據集。
地址： http://www.humblesoftware.com/finance/index
2.Graphr
Graphr是一個用HTML5 canvas寫的一個計算器應用，有每個圖像計算器應有的基本功能。
地址：http://www.graphr.org/
3.用HTML5和jQuery創建的華麗的動畫餅圖
你可以用javascript和HTML5來創建一個互動式餅圖，有華麗的動畫效果。這在之前只能用flash來完成，現在也可以使用最新的HTML5技術了。
地址：http://cyberpython.github.com/AwesomeChartJS/
4. AwesomeJS
AwesomeJS 能夠讓你創建簡單有用的圖表，而僅需幾行代碼即可。這是一個基於HTML5和canvas的javascript庫。
地址：http://cyberpython.github.com/AwesomeChartJS/
5.Ticker Plot（股票圖）
Ticker Plot（股票圖）是每一個在工作是使用圖標的web開發人員都必備的一個圖表工具。這是一個開源的項目，它使用HTML5 canvas在畫布上繪制圖形符號和滑鼠事件。Ticker Plot（股票圖）是專門為股票行情和技術分析設計的。
Ⅳ 如何使用echart中獲取canvas繪制到自己的canvas上去
獲取echart的imgge：
[javascript] view plain
var img = new Image();
img.src = myChart.getDataURL({
pixelRatio: 2,
backgroundColor: '#fff'
});
這中方式是獲取echart的圖片
獲取echart的canvas：
[javascript] view plain
var offcanvas= myChart.getRenderedCanvas({
pixelRatio: 2,
backgroundColor: '#fff'
});
有了種兩種方式再實現離屏canvas就很簡單了
下面給出一個簡單的示例(獲取canvas的)：
html頁面：
[html] view plain
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery/jquery-1.9.2.min.js"></script>
<script type="text/javascript" src="../js/echart/echarts.min.js"></script>
<script type="text/javascript" src="../js/echart/china.js"></script>
<script type="text/javascript" src="../js/effsctScatter-map.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<canvas id="canvas"></canvas>
</body>
</html>
js文件：
[javascript] view plain
/**
* Created by se7en on 2016/2/4.
*/
$(document).ready(function () {
var option = {
legend: {
data:['sin','cos']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [
{
type : 'value',
scale:true
}
],
yAxis : [
{
type : 'value',
scale:true
}
],
series : [
{
name:'sin',
type:'scatter',
large: true,
symbolSize: 3,
data: (function () {
var d = [];
var len = 10000;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
d.push([
x,
//Math.random() * 10
(Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
]);
}
//console.log(d)
return d;
})()
},
{
name:'cos',
type:'scatter',
large: true,
symbolSize: 3,
data: (function () {
var d = [];
var len = 10000;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
d.push([
x,
//Math.random() * 10
(Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
]);
}
//console.log(d)
return d;
})()
}
]
};
var myChart = echarts.init(document.getElementById('main'));
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
$('#main').hide();
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var ctx = canvas.getContext('2d');
var offcanvas = myChart.getRenderedCanvas({
pixelRatio: 2,
backgroundColor: '#fff'
});
ctx.drawImage(offcanvas,0,0);
});
至於echart獲取canvas中的參數大家可以自己嘗試一下，可能會有不同的結果
Ⅳ Canvas 使用指南
canvas 的能力是通過 context 對象表現出來的，context一般稱為繪圖環境。
DOMString 為 "2d" 時，context 是 CanvasRenderingContext2D 對象；(本文重點)
DOMString 為 "webgl" 時，context 是 WebGLRenderingContext 對象；
DOMString 為 "webgl2" 時，context 是 WebGL2RenderingContext 對象；
DOMString 為 "bitmaprenderer" 時，context 是 ImageBitmap 對象；
CanvasRenderingContext2D 對象實例 instance 共有16個屬性，只要設置了這些屬性，就會影響 instance 調用繪制方法時的表現，常用的有：
注意：可使用 instance 的 save() 和 restore() 方法來臨時修改 instance 的屬性
1、一般用來保存數據，不展示在瀏覽器頁面上，創建的兩種方式：a、css 方式設置為 display:none；b、JS創建 document.createElement('canvas')；
2、與HTML結合使用：可以採用 CSS 定位的方式，將 HTML 元素置於 canvas 元素之上，比如：在 canva 上疊加一個 div panel 作為某個開關控制界面；選景橡皮筋；時鍾等
3、也可使用兩個 canvas，一個用來顯示，另一個用來做數據准備和處理，這種方式通常效率高，但比較耗費內存
1、准備一個繪制背景的函數，用於每次擦除上一次繪制的結果
2、繪制輔助線
3、監聽事件，做坐標轉換 windowToCanvas
4、繪制內容的保存於恢復
5、三事件
onmousedown：保存初始 canvas 繪制狀態
onmousemove: 更新位置信息，並不斷調用初始 canvas 繪制狀態來擦除上一個繪制
onmouseup: 調用初始 canvas 繪制狀態來擦除上一個繪制，並根據onmousemove保存的信息做最終繪制，將結果繪制在 canvas 上
fillStyle 和 strokeStyle 可以是任意有效的css顏色值或者漸變色以及圖像Pattern
canvas 某一時刻只能有一條路徑存在，這條路徑可以包含多條子路徑。用 beginPath 來開始一條新路徑或清除上一次子路徑
textAlign: left,center,right
textBaseline: top,middle,bottom
1、三屬性 font,textAlign,textBaseline
2、三方法 strokeText, fillText, measureText
strokeText(text,x,y,maxWidth) 指定文本超過maxWidth會被縮放
measureText(text).width 返回指定文本寬度
3、水平垂直居中
注意每次變換前，用 save 和 restore 來保存原來繪制上下文
1、由路徑定義的一片區域，如一個三角形，矩形，圓形，然後調用 clip 即可得到剪輯區域
2、默認和 canvas 大小一致
3、設置剪輯區域後，瀏覽器將只對該區域進行繪制
4、調用clip會把剪輯區域設為當前剪輯區域與當前路徑定義的區域的交集，故clip 的調用經常在 save 和 restore 之間，這是為了防止剪輯區域越來越小
主要是 drawImage,getImageData,putImageData,createImageData 四個 API
Ⅵ 如何將採集到的數據通過delphi canvas 用曲線實時顯示出來
首先建立一個映射關系，將數據和坐標映射，
例如：y := 400 - value[index] * 0.5;
x := index - base;
然後在窗口中加入一個TImage。在TImage的OnPaint中繪圖
首先清除屏幕 Canvas.Rectangle(image.ClientRect);
然後Canvas.MoveTo(0, 0);
使用一個循環，從可顯示的第一個數據(base)開始到最新的數據（或者最大可顯示的個數）未知，
反復調用Canvas.LineTo(x, y);
拋磚引玉，剩下的留給您自己想像了。
Ⅶ canvas使用圖像(繪制圖、圖像平鋪、圖像剪裁、像素處理、繪制文字)
繪制圖像：drawImage()
獲取圖像數據：getImageData()
重寫圖像數據：putImageData()
導出圖像：toDataURL()
顧名思義，該方法就是用於將圖像繪制於Canvas畫布當中，具體用法有三種：
① 在畫布上定點陣圖像：
context.drawImage(img,x,y)
② 在畫布上定點陣圖像，並規定圖像的寬度和高度（縮放）：
context.drawImage(img,x,y,width,height)
③ 剪切圖像，並在畫布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
效果：
createPattern() 方法在指定的方向內重復指定的元素。元素可以是圖片、視頻，或者其他 <canvas> 元素。被重復的元素可用於繪制/填充矩形、圓形或線條等等。
效果：
使用圖形上下文不帶參數的clip()方法來實現Canvas圖形裁切功能，該方法會使用先創建好的路徑對canvas設置裁剪區域，裁剪指定區域顯示內容。裁剪是對畫布進行的，裁剪後的畫布是不能恢復到原來的大小，因此使用save及restore。
效果：
我們可以直接從HTML5 canvas中獲取單個像素。通過ImageData對象我們可以以讀寫一個數據數組的方式來操縱像素數據。當完成像素操作之後，如果要顯示它們，需要將這些像素復制到canvas上。
ImageData對象代表canvas中某個區域的底層像素數據。它包含三個只讀的屬性：
width：圖像的寬度，單位像素。
height：圖像的高度，單位像素。
data：包含像素值的一維數組。
在data數組中的每一個像素包含4個位元組的值。也就是說每一個像素由4個位元組表示，每一個位元組分別表示紅色，綠色，藍色和一個透明度alpha通道（RGBA）。
putImageData()函數將它們復制到canvas上。putImageData()函數有兩種格式。第一種格式是復制所有的像素到canvas中。canvasX和canvasY參數是canvas上插入像素的x和y坐標。
sx和sy參數（sourceX 和 sourceY）是矩形左上角的x和y坐標。
sWidth和sHeight參數（sourceWidth 和 sourceHeight）是矩形的寬度和高度。
我們也可以從canvas上獲取一個矩形區域的像素到一個ImageData對象中。通過getImageData函數可以完成這個操作。
x和y參數是從canvas上獲取的矩形的左上角的坐標。
width和height參數是從canvas上獲取的矩形的寬度和高度。
我們可以在HTML5 canvas上繪制繪制文字，並且可以設置文字的字體，大小和顏色。
繪制文字的字體由font屬性來控制。如果你需要使用顏色來填充文字或製作描邊文字，可以使用fillStyle和strokeStyle屬性來完成。
要在canvas上繪制文字，可以通過的fillText()函數或strokeText()函數來完成。
表示在(x,y)的位置，繪制text的內容。可選參數maxWidth為文本的最大寬度，單位為像素。如果設置了該屬性，當文本內容寬度超過該參數值，則會自動按比例縮小字體，使文本的內容全部可見；未超過時，則以實際寬度顯示。如果未設置該屬性，當文本內容寬度超過畫布寬度時，超出的內容將被隱藏。
效果：
Ⅷ canvas怎麼保存
可以用Bitmap.compress函數來把Bitmap對象保存成PNG或JPG文件，然後可以用BitmapFactory把文件中的數據讀進來再生成Bitmap對象。
保存的代碼大概類似於這樣：
try {
FileOutputStream out = new FileOutputStream(filename);
bmp.compress(Bitmap.CompressFormat.PNG, 90, out);
} catch (Exception e) {
e.printStackTrace();
}
具體的可以去查Bitmap和BitmapFactory的幫助文檔。