canvas的API方法(canvas2DAPI的1.2toDataURL方法)

1.canvas 2D API的1.2 toDataURL（)方法

此函数，返回一张使用canvas绘制的图片，返回值符合data:URL格式，格式如下：url = canvas . toDataURL( [ type， 。

])规范规定，在未指定返回图片类型时，返回的图片格式必须为PNG格式，如果canvas没有任何像素，则返回值为：“data：，”，这是最短的data:URL，在text/plain资源中表现为空字符串。type的可以在image/png,image/jpeg,image/svg+xml等 MIME类型中选择。

如果是image/jpeg，可以有第二个参数，如果第二个参数的值在0-1之间，则表示JPEG的质量等级，否则使用浏览器内置默认质量等级。下面的代码可以从ID为codeex的canvas中取得绘制内容，并作为DataURL传递给img元素，并显示。

varcanvas = document.getElementById('codeex');varurl = canvas.toDataURL();//id为myimg的图片元素myimg.src = url; 1 二维绘图上下文 当使用一个canvas元素的getContext(“2d”)方法时，返回的是对象，其内部表现为笛卡尔平面坐标，并且左上角坐标为（0,0），在本平面中往右则x坐标增加和往下方y坐标增加。每一个canvas元素仅有一个上下文对象。

其接口如下： {// back-reference to the canvas readonly attribute HTMLCanvasElement canvas;// state void restore(); // pop state stack and restore statevoid save(); // push state on state stack // transformations (default transform is the identity matrix)void rotate(in float angle);void scale(in float x, in float y);void setTransform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);void transform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);void translate(in float x, in float y);// compositing attribute float globalAlpha; // (default 1.0)attribute DOMString ; // (default source-over)// colors and styles attribute any fillStyle; // (default black)attribute any strokeStyle; // (default black)CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);CanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);// line styles attribute DOMString lineCap; // butt, round, square (default butt)attribute DOMString lineJoin; // miter, round, bevel (default miter)attribute float lineWidth; // (default 1)attribute float miterLimit; // (default 10)// shadows attribute float shadowBlur; // (default 0)attribute DOMString shadowColor; // (default transparent black)attribute float shadowOffsetX; // (default 0)attribute float shadowOffsetY; // (default 0)// rects void clearRect(in float x, in float y, in float w, in float h);void fillRect(in float x, in float y, in float w, in float h);void strokeRect(in float x, in float y, in float w, in float h);// Complex shapes (paths) API void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);void beginPath();void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);void clip();void closePath();void fill();void lineTo(in float x, in float y);void moveTo(in float x, in float y);void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);void rect(in float x, in float y, in float w, in float h);void stroke();boolean isPointInPath(in float x, in float y);// text attribute DOMString font; // (default 10px sans-serif)attribute DOMString textAlign; // start, end, left, right, center (default: start)attribute DOMString textBaseline; // top, hanging, middle, alphabetic, ideographic, bottom (default: alphabetic)void fillText(in DOMString text, in float x, in float y, optional in float maxWidth);TextMetrics measureText(in DOMString text);void strokeText(in DOMString text, in float x, in float y, optional in float maxWidth);// drawing images void drawImage(in HTMLImageElement image, in float dx, in float dy, optional in float dw, in float dh);void drawImage(in HTMLImageElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);void drawImage(in HTMLCanvasElement image, in float dx, in float dy, optional in float dw, in float dh);void drawImage(in HTMLCanvasElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);void drawImage(in HTMLVideoElement image, in float dx, in float dy, optional in float dw, in float dh);void drawImage(in HTMLVideoElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);// pixel manipulationImageData createImageData(in 。

2.求html5中canvas属性以及方法,最好有对这些属性和方法的解释和例

标签定义图形，比如图表和其他图像。

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。

Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 标记。

我们甚至可以在 IE 中使用 标记，并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码（由 Google 发起）来构建兼容性的画布。参见：; charset = utf-8"); this.response = response; out = this.response.getWriter(); println(""); //1. 获取请求方式、处理乱码问题 String method = request.getMethod(); //servletRequest中的方法 request.setCharacterEncoding("utf-8"); //1. 获取请求体的编码方式 String characterEncoding = request.getCharacterEncoding(); println("getCharacterEncoding = " + characterEncoding); //2. get body length int contentLength = request.getContentLength(); println("getContentLength = " + contentLength); //3. MIME type String mimeType = request.getContentType(); println("getContentType = " + mimeType); //4. 接收请求的接口的 Internet Protocol (IP) 地址 String ip = request.getLocalAddr(); println("getLocalAddr = " + ip); //5. 基于 Accept-Language 头，返回客户端将用来接受内容的首选 Locale 客户端语言环境 Locale locale = request.getLocale(); println("getLocale = " + locale); //6. 所有的语言环境 Enumeration locales = request.getLocales(); while(locales.hasMoreElements()){ Locale temp = locales.nextElement(); println("\n Locales = " + temp); } //7. 接收请求的 Internet Protocol (IP) 接口的主机名 String localName = request.getLocalName(); println("localName = " + localName); //8. 接收请求的接口的 Internet Protocol (IP) 端口号 int localPort = request.getLocalPort(); println("localPort = " + localPort); //9. 返回请求使用的协议的名称和版本 String protocol = request.getProtocol(); println("protocol = " + protocol); //10. 读取请求正文信息 BufferedReader reader = request.getReader(); println("getReader = " + reader.toString()); //11. 发送请求的客户端 String remoteAddr = request.getRemoteAddr(); println("RemoteAddr = " + remoteAddr); //12. 发送请求的客户主机 String remoteHost = request.getRemoteHost(); println("RemoteHost = " + remoteHost); //13. 发送请求的客户主机端口 int remotePort = request.getRemotePort(); println("RemotePort = " + remotePort); //14. 返回用于发出此请求的方案名称，例如：http 、https 、ftp String scheme = request.getScheme(); println("Scheme = " + scheme); //15. 返回请求被发送到的服务器的主机名。

它是Host头值"："（如果有）之前的那部分的值。 或者解析服务器名称或服务器的IP地址 String serverName = request.getServerName(); println("ServerName = " + serverName); //16. 返回请求被发送到的端口。

他是"Host"头值"：" （如果有）之后的那部分的值，或者接受客户端连接的服务器端口。 int serverPort = request.getServerPort(); println("ServerPort = " + serverPort); //17. 返回一个boolean值，指示此请求是否是使用安全通道（比如HTTPS） 发出的。

boolean secure = request.isSecure(); println("isSecure = " + secure)； //以上方法为 ServletRequest 接口提供的//以下方法为 HttpServletRequest 接口提供的 /* * 18. 返回用于保护servlet的验证方法名称。 所有的servlet容器都支持 * basic、form和client certificate验证， 并且可能还支持digest验证 */ String authType = request.getAuthType(); println("authType = " + authType); //19. getDateHeader ?? request.getDateHeader(""); //20. 返回请求头包含的所有头名称的枚举。

Enumeration headerNames = request.getHeaderNames(); println(""); while(headerNames.hasMoreElements()){ String name = headerNames.nextElement(); println(" headerNmea = " + name + "; getHeader = " + request.getHeader(name)); } println(""); //21. 以int的形式返回指定请求头的值。 ？？？ request.getIntHeader("123"); //22. 返回与客户端发出此请求时发送的URL相关联的额外路径信息。

String pathInfo = request.getPathInfo(); println("PathInfo = " + pathInfo); //23. 返回包含在请求RUL中路径后面的查询字符串。如果没有查询字符串返回null String remoteUser = request.getRemoteUser(); println("RemoteUser = " + remoteUser); //24. 返回客户端制定的回话ID String requestedSessionId = request.getRequestedSessionId(); println("requestSessionId = " + requestedSessionId); //25. 返回请求调用servlet的URL部分 String servletPath = request.getServletPath(); println("servletPath = " + servletPath); //26. 返回与此请求关联的当前HttpSession，如果没有当前会话并且参数为true，则返回一个新会话。

HttpSession session = request.getSession(true); println("getSession(true) = " + session); //27. 返回包含当前已经过验证的用户的名称的java.security.Principal对象。如果用户没有经过验证，则该方法返回null Principal userPrincipal = request.getUserPrincipal(); println("userPrincipal = " + userPrincipal); //28. 检查会话的id是否作为Cook进入的 。

5.HTML5 Canvas中的transform方法

主要思想：首先要准备一张有连续帧的图片，然后利用HTML5Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。

关键技术点：JavaScript函数setTimeout（)有两个参数，第一个是参数可以传递一个JavaScript方法，另外一个参数代表间隔时间，单位为毫秒数。代码示例：setTimeout(update,1000/30);Canvas的API-drawImage（)方法，需要指定全部9个参数：ctx.drawImage(myImage,offw,offh,width,height,x2,y2,width,height)；其中offw,offh是指源图像的起始坐标点，width,height表示源图像的宽与高，x2,y2表示源图像在目标Canvas上的起始坐标点。