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

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

此函數(shù)，返回一張使用canvas繪制的圖片，返回值符合data:URL格式，格式如下：url = canvas . toDataURL( [ type， 。

])規(guī)范規(guī)定，在未指定返回圖片類型時(shí)，返回的圖片格式必須為PNG格式，如果canvas沒(méi)有任何像素，則返回值為：“data：，”，這是最短的data:URL，在text/plain資源中表現(xiàn)為空字符串。type的可以在image/png,image/jpeg,image/svg+xml等 MIME類型中選擇。

如果是image/jpeg，可以有第二個(gè)參數(shù)，如果第二個(gè)參數(shù)的值在0-1之間，則表示JPEG的質(zhì)量等級(jí)，否則使用瀏覽器內(nèi)置默認(rèn)質(zhì)量等級(jí)。下面的代碼可以從ID為codeex的canvas中取得繪制內(nèi)容，并作為DataURL傳遞給img元素，并顯示。

varcanvas = document.getElementById('codeex');varurl = canvas.toDataURL();//id為myimg的圖片元素myimg.src = url; 1 二維繪圖上下文 當(dāng)使用一個(gè)canvas元素的getContext(“2d”)方法時(shí)，返回的是對(duì)象，其內(nèi)部表現(xiàn)為笛卡爾平面坐標(biāo)，并且左上角坐標(biāo)為（0,0），在本平面中往右則x坐標(biāo)增加和往下方y(tǒng)坐標(biāo)增加。每一個(gè)canvas元素僅有一個(gè)上下文對(duì)象。

其接口如下： {// 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屬性以及方法,最好有對(duì)這些屬性和方法的解釋和例

標(biāo)簽定義圖形，比如圖表和其他圖像。

這個(gè) HTML 元素是為了客戶端矢量圖形而設(shè)計(jì)的。它自己沒(méi)有行為，但卻把一個(gè)繪圖 API 展現(xiàn)給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。

標(biāo)記由 Apple 在 Safari 1.3 Web 瀏覽器中引入。對(duì) HTML 的這一根本擴(kuò)展的原因在于，HTML 在 Safari 中的繪圖能力也為 Mac OS X 桌面的 Dashboard 組件所使用，并且 Apple 希望有一種方式在 Dashboard 中支持腳本化的圖形。

Firefox 1.5 和 Opera 9 都跟隨了 Safari 的引領(lǐng)。這兩個(gè)瀏覽器都支持 標(biāo)記。

我們甚至可以在 IE 中使用 標(biāo)記，并在 IE 的 VML 支持的基礎(chǔ)上用開(kāi)源的 JavaScript 代碼（由 Google 發(fā)起）來(lái)構(gòu)建兼容性的畫布。參見(jiàn)：; charset = utf-8"); this.response = response; out = this.response.getWriter(); println(""); //1. 獲取請(qǐng)求方式、處理亂碼問(wèn)題 String method = request.getMethod(); //servletRequest中的方法 request.setCharacterEncoding("utf-8"); //1. 獲取請(qǐng)求體的編碼方式 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. 接收請(qǐng)求的接口的 Internet Protocol (IP) 地址 String ip = request.getLocalAddr(); println("getLocalAddr = " + ip); //5. 基于 Accept-Language 頭，返回客戶端將用來(lái)接受內(nèi)容的首選 Locale 客戶端語(yǔ)言環(huán)境 Locale locale = request.getLocale(); println("getLocale = " + locale); //6. 所有的語(yǔ)言環(huán)境 Enumeration locales = request.getLocales(); while(locales.hasMoreElements()){ Locale temp = locales.nextElement(); println("\n Locales = " + temp); } //7. 接收請(qǐng)求的 Internet Protocol (IP) 接口的主機(jī)名 String localName = request.getLocalName(); println("localName = " + localName); //8. 接收請(qǐng)求的接口的 Internet Protocol (IP) 端口號(hào) int localPort = request.getLocalPort(); println("localPort = " + localPort); //9. 返回請(qǐng)求使用的協(xié)議的名稱和版本 String protocol = request.getProtocol(); println("protocol = " + protocol); //10. 讀取請(qǐng)求正文信息 BufferedReader reader = request.getReader(); println("getReader = " + reader.toString()); //11. 發(fā)送請(qǐng)求的客戶端 String remoteAddr = request.getRemoteAddr(); println("RemoteAddr = " + remoteAddr); //12. 發(fā)送請(qǐng)求的客戶主機(jī) String remoteHost = request.getRemoteHost(); println("RemoteHost = " + remoteHost); //13. 發(fā)送請(qǐng)求的客戶主機(jī)端口 int remotePort = request.getRemotePort(); println("RemotePort = " + remotePort); //14. 返回用于發(fā)出此請(qǐng)求的方案名稱，例如：http 、https 、ftp String scheme = request.getScheme(); println("Scheme = " + scheme); //15. 返回請(qǐng)求被發(fā)送到的服務(wù)器的主機(jī)名。

它是Host頭值"："（如果有）之前的那部分的值。 或者解析服務(wù)器名稱或服務(wù)器的IP地址 String serverName = request.getServerName(); println("ServerName = " + serverName); //16. 返回請(qǐng)求被發(fā)送到的端口。

他是"Host"頭值"：" （如果有）之后的那部分的值，或者接受客戶端連接的服務(wù)器端口。 int serverPort = request.getServerPort(); println("ServerPort = " + serverPort); //17. 返回一個(gè)boolean值，指示此請(qǐng)求是否是使用安全通道（比如HTTPS） 發(fā)出的。

boolean secure = request.isSecure(); println("isSecure = " + secure)； //以上方法為 ServletRequest 接口提供的//以下方法為 HttpServletRequest 接口提供的 /* * 18. 返回用于保護(hù)servlet的驗(yàn)證方法名稱。 所有的servlet容器都支持 * basic、form和client certificate驗(yàn)證， 并且可能還支持digest驗(yàn)證 */ String authType = request.getAuthType(); println("authType = " + authType); //19. getDateHeader ?? request.getDateHeader(""); //20. 返回請(qǐng)求頭包含的所有頭名稱的枚舉。

Enumeration headerNames = request.getHeaderNames(); println(""); while(headerNames.hasMoreElements()){ String name = headerNames.nextElement(); println(" headerNmea = " + name + "; getHeader = " + request.getHeader(name)); } println(""); //21. 以int的形式返回指定請(qǐng)求頭的值。 ？？？ request.getIntHeader("123"); //22. 返回與客戶端發(fā)出此請(qǐng)求時(shí)發(fā)送的URL相關(guān)聯(lián)的額外路徑信息。

String pathInfo = request.getPathInfo(); println("PathInfo = " + pathInfo); //23. 返回包含在請(qǐng)求RUL中路徑后面的查詢字符串。如果沒(méi)有查詢字符串返回null String remoteUser = request.getRemoteUser(); println("RemoteUser = " + remoteUser); //24. 返回客戶端制定的回話ID String requestedSessionId = request.getRequestedSessionId(); println("requestSessionId = " + requestedSessionId); //25. 返回請(qǐng)求調(diào)用servlet的URL部分 String servletPath = request.getServletPath(); println("servletPath = " + servletPath); //26. 返回與此請(qǐng)求關(guān)聯(lián)的當(dāng)前HttpSession，如果沒(méi)有當(dāng)前會(huì)話并且參數(shù)為true，則返回一個(gè)新會(huì)話。

HttpSession session = request.getSession(true); println("getSession(true) = " + session); //27. 返回包含當(dāng)前已經(jīng)過(guò)驗(yàn)證的用戶的名稱的java.security.Principal對(duì)象。如果用戶沒(méi)有經(jīng)過(guò)驗(yàn)證，則該方法返回null Principal userPrincipal = request.getUserPrincipal(); println("userPrincipal = " + userPrincipal); //28. 檢查會(huì)話的id是否作為Cook進(jìn)入的 。

5.HTML5 Canvas中的transform方法

主要思想：首先要準(zhǔn)備一張有連續(xù)幀的圖片，然后利用HTML5Canvas的draw方法在不同的時(shí)間間隔繪制不同的幀，這樣看起來(lái)就像動(dòng)畫在播放。

關(guān)鍵技術(shù)點(diǎn)：JavaScript函數(shù)setTimeout（)有兩個(gè)參數(shù)，第一個(gè)是參數(shù)可以傳遞一個(gè)JavaScript方法，另外一個(gè)參數(shù)代表間隔時(shí)間，單位為毫秒數(shù)。代碼示例：setTimeout(update,1000/30);Canvas的API-drawImage（)方法，需要指定全部9個(gè)參數(shù)：ctx.drawImage(myImage,offw,offh,width,height,x2,y2,width,height)；其中offw,offh是指源圖像的起始坐標(biāo)點(diǎn)，width,height表示源圖像的寬與高，x2,y2表示源圖像在目標(biāo)Canvas上的起始坐標(biāo)點(diǎn)。