想把canvas的绘图存到服务器，但是php接收不到jquery传过来的字符串

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=documentgetElementById('canvastest');//获取canvas元素；

var testcontext=canvasTestgetContext('2d');

使用javascript来创建你的画布，你可以使用矩形、圆圈和三角形,并使用线、幻灯片和渐变来创建你的设计。

下面是完成的代码：

var canvasTest=documentgetElementById('canvastest');

var testcontext=canvasTestgetContext('2d');

// create rectangle

testcontextfillStyle='rgb(0,125,125)';

testcontextfillRect(10,10,250,180);

// create circle

testcontextbeginPath();

testcontextarc(300, 340, 100, 0, MathPI 2, true);

testcontextclosePath();

testcontextfillStyle='rgb(75,10,125)';

testcontextfill();

testcontextstroke();

我们可以将上面的代码加入windowonload，或者jQuery的ready方法里，当文档加载完，将会创建文明的图形。

一些HTML5 canvas 图像解决方案

用与HTML5 Canvas元素你可以开发动态绘图对象比如如可视化信息或数据图。HTML5 canvas 可以在javascript的帮助下很容易的绘制二维图形。让我们来看一下HTML5 canvas元素的一些数据图应用。

1 HumbleFinance

HumbleFinance是用js开发的一个开源的数据可视化图表，它用HTML5 canvas生成可视化图表数据，它可以用一个轴来展示任何两个二维的数据集。

地址： >

DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行 *** 作。比如有一个 元素，可以直接用jquery增加click事件$('#p1')click(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体，图形本身实际都是Canvas的一部分，不可单独获取，所以也就无法直接给某个图形增加JavaScript事件。

Canvas的限制

在Canvas里，所有图形都绘制在帧上，绘制方法不会将绘制好的图形元素作为一个返回值输出，js也无法获取到已经绘制好的图形元素。比如：

代码如下:

cvs = documentgetElementById('mycanvas');

ctx = canvasgetContext('2d');

theRect = ctxrect(10, 10, 100, 100);

ctxstroke();

consolelog(theRect); //undefined

这段代码在canvas标签里绘制了一个矩形，首先可以看到绘制图形的rect方法没有返回值。如果打开浏览器的开发者工具，还可以看到canvas标签内部没有增加任何内容，而在js里获取到的canvas元素以及当前的上下文，也都没有任何表示新增图形的内容。

所以，前端常用的dom方法在canvas里是不适用的。比如点击上面Canvas里的矩形，实际点击的是整个Canvas元素。

给Canvas元素绑定事件

由于事件只能达到Canvas元素这一层，所以，如果想进一步深入，识别点击发生在Canvas内部的`哪一个图形上，就需要增加代码来进行处理。基本思路是：给Canvas元素绑定事件，当事件发生时，检查事件对象的位置，然后检查哪些图形覆盖了该位置。比如上面的例子里画过一个矩形，该矩形覆盖x轴10-110、y轴10-110的范围。只要鼠标点击在这个范围里，就可以视为点击了该矩形，也就可以手动触发矩形需要处理的点击事件。思路其实比较简单，但是实现起来还是稍微有点复杂。不仅要考虑这个判断过程的效率，有些地方还需要重新判断事件类型，设置要重新定义一个Canvas内部的捕获和冒泡机制。

首先要做的，是给Canvas元素绑定事件，比如Canvas内部某个图形要绑定点击事件，就需要通过Canvas元素代理该事件：

代码如下:

cvs = documentgetElementById('mycanvas');

cvsaddEventListener('click', function(e){

//

}, false);

接下来需要判断事件对象发生的位置，事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标。但是这个属性Opera不支持，Safari也打算移除，所以要做一些兼容写法：

代码如下:

function getEventPosition(ev){

var x, y;

if (evlayerX || evlayerX == 0) {

x = evlayerX;

y = evlayerY;

} else if (evoffsetX || evoffsetX == 0) { // Opera

x = evoffsetX;

y = evoffsetY;

}

return {x: x, y: y};

}

//注：使用上面这个函数，需要给Canvas元素的position设为absolute。

现在有了事件对象的坐标位置，下面就要判断Canvas里的图形，有哪些覆盖了这个坐标。

isPointInPath方法

Canvas的isPointInPath方法可以判断当前上下文的图形是否覆盖了某个坐标，比如：

代码如下:

cvs = documentgetElementById('mycanvas');

ctx = canvasgetContext('2d');

ctxrect(10, 10, 100, 100);

ctxstroke();

ctxisPointInPath(50, 50); //true

ctxisPointInPath(5, 5); //false

接下来增加一个事件判断，就可以判断一个点击事件是否发生在矩形上：

代码如下:

cvsaddEventListener('click', function(e){

p = getEventPosition(e);

if(ctxisPointInPath(px, py)){

//点击了矩形

}

}, false);

以上就是处理Canvas事件的基本方法，但是上面的代码还有局限，由于isPointInPath方法仅判断当前上下文环境中的路径，所以当Canvas里已经绘制了多个图形时，仅能以最后一个图形的上下文环境来判断事件，比如：

代码如下:

整理了一些有关canvas的属性（ ’ - ’ )

canvas画布

用于绘制图像，本身不具备绘制能力，需要通过脚本来完成绘画，通常这个脚本就是javascript

canvas的默认宽高为300150，不能通过css或行内样式修改它的宽高，它有自己的宽高属性

canvas是一个html元素，通过js来执行绘制

getContext()是用来获取canvas上下文渲染环境和绘画功能的方法,目前只有一个参数：'2d'，代表返回一个2d的绘制环境，将来有可能3d，但是目前不支持

它可以做什么？

  html5小游戏

  绘制，图标，图表，曲线图等等，例如地图上的热力图等等

  以及各种酷炫的动画效果都可以通过canvas来完成(可以了解一下WEBGL<>

如何引用页面元素中的canvas

canvas是h5的一大亮点。这是我之前学习做的笔记，可以参考一下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>canvas 教程 --- ITDragon博客 </title>

<style>

canvas{background: #F9F9F9;border:1px solid #000;}

one,two,thr,four{float:left;margin-left: 200px;}

</style>

<script type="text/javascript" src=">

以上就是关于想把canvas的绘图存到服务器，但是php接收不到jquery传过来的字符串全部的内容，包括:想把canvas的绘图存到服务器，但是php接收不到jquery传过来的字符串、canvas怎么导入word、html5 canvas绘图有什么用等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！