Ⅰ 如何利用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的帮助文档。