The canvas of UIWebView's HTML5 extension

The earlier release of the so-called "HTML5" extension, strictly speaking, is not "HTML5". The curvature of a few lines of JS code on the self-proclaimed as HTML5 expansion of some of the title party suspicion.

By contrast, the theme canvas of this article can be said to be a real HTML5 extension. As the JavaScript API under the HTML5 standard system, canvas is supported not only by the Apple system's own safari, but also by the UIWebView class.

The following directly affixed to the new category of the canvas part of the source code.

Full code: https://github.com/duzixi/UIWebView-HTML5 (Download button at the bottom right of the page, "Download ZIP". Welcome fork)

This blog post starting address: Http://blog.csdn.net/duzixi

<pre name= "code" class= "OBJC" > @interface uiwebview (Canvas)///Create a canvas of a specified size-(void) Createcanvas: (NSString *) Canvasid width: (nsinteger) Width height: (nsinteger) height;///Create a canvas of a specified size at the specified location-(void) Createcan VAS: (NSString *) canvasid width: (nsinteger) Width height: (nsinteger) Height x: (N Sinteger) x y: (nsinteger) y;///Draw Rectangle fill Context.fillrect (x,y,width,height)-(void) Fillrectoncanvas: (nsstr ing *) Canvasid x: (nsinteger) x y: (nsinteger) y width: (nsintege R) Width Height: (nsinteger) Height Uicolor: (uicolor *) color;///Draw Rectangle Border Context.strokerect                         (x,y,width,height)-(void) Strokerectoncanvas: (NSString *) Canvasid x: (Nsinteger) x                   Y: (nsinteger) y width: (nsinteger) Width height: (nsinteger) height   Uicolor: (Uicolor *) color              LineWidth: (nsinteger) linewidth;///Clear Rectangular area context.clearrect (x,y,width,height)-(void) Clearrectoncanvas: (NS String *) Canvasid x: (nsinteger) x y: (nsinteger) y width: (NS Integer) Width Height: (nsinteger) height;///Draw arc Fill Context.arc (x, y, radius, starangle,endangle, antic             lockwise)-(void) Arconcanvas: (NSString *) Canvasid CenterX: (nsinteger) x centery: (Nsinteger) y Radius: (Nsinteger) R startangle: (float) startangle endangle: (float) endangle anticlockwise: (BOOL) A Nticlockwise Uicolor: (Uicolor *) color;///draw a line segment Context.moveto (x, y) context.lineto (x, y)-(void) Lineoncanvas:                   (NSString *) canvasid x1: (nsinteger) x1 y1: (nsinteger) y1 x2: (nsinteger) x2 Y2: (nsinteger) y2 uicolor: (uicolor *) color linewidth: (Nsinteger) linewidth;///draw a Polyline-(void) Linesoncanvas:(NSString *) Canvasid points: (Nsarray *) Points unicolor: (Uicolor *) color linewidth: (NS Integer) linewidth;///Draw Bézier curve Context.beziercurveto (cp1x,cp1y,cp2x,cp2y,x,y)-(void) Beziercurveoncanvas: (NSString *) Canvasid x1: (nsinteger) x1 y1: (nsinteger) y1 cp1x: (N                       Sinteger) cp1x cp1y: (nsinteger) cp1y cp2x: (Nsinteger) CP2X CP2Y: (Nsinteger) cp2y X2: (nsinteger) x2 y2: (Nsinteger) y2 u Nicolor: (Uicolor *) color linewidth: (Nsinteger) linewidth;///draw two spline Context.quadraticcurveto (qcpx,qcpy, QX,QY)//coming soon...///display part of the image Context.drawimage (IMAGE,SX,SY,SW,SH,DX,DY,DW,DH)-(void) DrawImage: (NSString *) SR C Oncanvas: (NSString *) Canvasid SX: (nsinteger) SX sy: (nsinteger) sy SW: (NS Integer) SW SH: (NSINteger) SH dx: (nsinteger) dx dy: (nsinteger) dy DW: (nsinteger) DW dh: (N Sinteger) DH; @end

#pragma mark-#pragma mark on the Web page #import "uicolor+change.h"//ver.2014.7.12@implementation UIWebView (Canvas)// Creates a transparent canvas of a specified size-(void) Createcanvas: (NSString *) canvasid width: (nsinteger) Width height: (nsinteger) height{NSString *                          jsstring = [NSString stringWithFormat: @ "var canvas = document.createelement (' canvas ');" "Canvas.id =%@; Canvas.width =%d; Canvas.height =%d; "" Document.body.appendChild (canvas); "" var g = Canvas.getcontext (' 2d '); ""    G.strokerect (%d,%d,%d,%d); ", canvasid, width, height, 0, 0, Width,height]; [Self stringbyevaluatingjavascriptfromstring:jsstring];} Creates a transparent canvas of a specified size at the specified location-(void) Createcanvas: (NSString *) canvasid width: (nsinteger) Width height: (nsinteger) Height x: (    Nsinteger) x y: (nsinteger) y{//[self createcanvas:canvasid width:width height:height];          NSString *jsstring = [NSString stringWithFormat:                @ "var canvas = document.createelement (' canvas ');" " Canvas.id =%@; Canvas.width =%d; Canvas.height =%d; "" canvas.style.position = ' absolute '; "" Canvas.style.top = '%d '; "" Canvas.style.left = '%d '; "" Document.body.appendChild (canvas); "" var g = Canvas.getcontext (' 2d '); ""    G.strokerect (%d,%d,%d,%d); ", canvasid, width, height, y, x, 0, 0, Width,height]; [Self stringbyevaluatingjavascriptfromstring:jsstring];} Draw Rectangle Fill Context.fillrect (x,y,width,height)-(void) Fillrectoncanvas: (NSString *) Canvasid x: (nsinteger) x y: ( Nsinteger) y width: (nsinteger) Width height: (nsinteger) Height Uicolor: (uicolor *) color{nsstring *jsstring = [Nsstri ng stringWithFormat: @ "var canvas = document.getElementById ('%@ ');" " var context = CanvaS.getcontext (' 2d '); "" Context.fillstyle = '%@ '; ""    Context.fillrect (%d,%d,%d,%d); ", Canvasid, [color canvascolorstring], x, y, width, height]; [Self stringbyevaluatingjavascriptfromstring:jsstring];} Draw Rectangle Border Strokerect (x,y,width,height)-(void) Strokerectoncanvas: (NSString *) Canvasid x: (nsinteger) x y: (nsinteger) y Width: (nsinteger) Width height: (nsinteger) Height Uicolor: (uicolor *) color linewidth: (nsinteger) linewidth{NSString *                          jsstring = [NSString stringWithFormat: @ "var canvas = document.getElementById ('%@ ');"                          "var context = Canvas.getcontext (' 2d ');"                          "Context.strokestyle = '%@ ';"                          "Context.linewidth = '%d ';"                          "Context.strokerect (%d,%d,%d,%d);"    , Canvasid, [color canvascolorstring], linewidth, x, y, width, height]; [Self StringbyevAluatingjavascriptfromstring:jsstring];} Clear Rectangular area context.clearrect (x,y,width,height)-(void) Clearrectoncanvas: (NSString *) Canvasid x: (nsinteger) x y: (                          Nsinteger) y width: (nsinteger) Width height: (nsinteger) height{nsstring *jsstring = [NSString stringWithFormat: @ "var canvas = document.getElementById ('%@ ');" " var context = Canvas.getcontext (' 2d '); ""    Context.clearrect (%d,%d,%d,%d); ", Canvasid, x, y, width, height]; [Self stringbyevaluatingjavascriptfromstring:jsstring];} Draw Arc Fill Context.arc (x, y, radius, Starangle,endangle, anticlockwise)-(void) Arconcanvas: (NSString *) Canvasid CenterX :(Nsinteger) x centery: (nsinteger) y radius: (nsinteger) R startangle: (float) startangle endangle: (float) endangle                          Anticlockwise: (BOOL) anticlockwise uicolor: (Uicolor *) color{nsstring *jsstring = [NSString stringWithFormat:      @ "var canvas = document.getElementById ('%@ ');"                    "var context = Canvas.getcontext (' 2d ');"                          "Context.beginpath ();"                          "Context.arc (%d,%d,%d,%f,%f,%@);"                          "Context.closepath ();"                          "Context.fillstyle = '%@ ';" "Context.fill ();", Canvasid, X, Y, R, StartAngle, Endangle, anticlockwise?    @ "true": @ "false", [color canvascolorstring]]; [Self stringbyevaluatingjavascriptfromstring:jsstring];} Draw a line segment Context.moveto (x, y) context.lineto (x, y)-(void) Lineoncanvas: (NSString *) canvasid x1: (nsinteger) x1 Y1: ( Nsinteger) y1 x2: (nsinteger) x2 y2: (nsinteger) y2 uicolor: (uicolor *) color linewidth: (nsinteger) linewidth{NSString *                          jsstring = [NSString stringWithFormat: @ "var canvas = document.getElementById ('%@ ');"                          "var context = Canvas.getcontext (' 2d ');"                          "Context.beginpath ();" "Context.moveto (%d,%d); "" Context.lineto (%d,%d); "" Context.closepath (); "" Context.strokestyle = '%@ '; "" Context.linewidth =%d; ""    Context.stroke (); ", Canvasid, x1, y1, x2, y2, [color canvascolorstring], linewidth]; [Self stringbyevaluatingjavascriptfromstring:jsstring];} Draw a polyline-(void) Linesoncanvas: (NSString *) Canvasid points: (Nsarray *) Points unicolor: (Uicolor *) color linewidth: ( Nsinteger) linewidth{NSString *jsstring = [NSString stringWithFormat: @ "var canvas = document. getElementById ('%@ '); "" var context = Canvas.getcontext (' 2d '); ""        Context.beginpath (); ", Canvasid]; for (int i = 0; i < [points count]/2; i++) {jsstring = [jsstring stringbyappendingformat:@ "Context.lineto (%@, %@); ", Points[i * 2], points[i * 2 + 1]];                } jsstring = [jsstring stringbyappendingformat:@ "" "" Context.strokestyle = '%@ '; "                "Context.linewidth =%d;"    "Context.stroke ();", [Color canvascolorstring], linewidth]; [Self stringbyevaluatingjavascriptfromstring:jsstring];}                         Draw Bézier curve Context.beziercurveto (cp1x,cp1y,cp2x,cp2y,x,y)-(void) Beziercurveoncanvas: (NSString *) canvasid                       X1: (Nsinteger) x1 y1: (nsinteger) y1 cp1x: (Nsinteger) cp1x                         CP1Y: (Nsinteger) cp1y cp2x: (nsinteger) cp2x cp2y: (Nsinteger) cp2y                  X2: (Nsinteger) x2 y2: (nsinteger) y2 unicolor: (uicolor *) color                          LineWidth: (nsinteger) linewidth{nsstring *jsstring = [NSString stringWithFormat: @ "var canvas = document.getElementById ('%@ ');" " var conText = Canvas.getcontext (' 2d '); "" Context.beginpath (); "" Context.moveto (%d,%d); "" Context.beziercurveto (%d,%d,%d,%d,%d,%d); "" Context.strokestyle = '%@ '; "" Context.linewidth =%d; "" Context.stroke (); ", Canvasid, x1, y1, cp1x, cp1y, CP2X, cp2y, x2, y2, [Color canvascolorstring],    LineWidth]; [Self stringbyevaluatingjavascriptfromstring:jsstring];}  Display part of the image Context.drawimage (IMAGE,SX,SY,SW,SH,DX,DY,DW,DH)-(void) DrawImage: (NSString *) src Oncanvas: (nsstring *) Canvasid SX: (nsinteger) SX sy: (nsinteger) sy SW: (nsinteger) SW SH: (nsinteger) SH dx: (nsinteger) dx dy: (nsinteger) dy DW: (nsinteger) DW D H: (nsinteger) dh{nsstring *jsstring = [NSString stringWithFormat: @ "var image = NEW Image (); "" IMAGE.SRC = '%@ '; "" var canvas = document.getElementById ('%@ '); "" var context = Canvas.getcontext (' 2d '); "" Context.drawimage (image,%d,%d,%d,%d,%d,%d,%d,%d) ", SRC, Canvasid, SX, SY, SW, SH, dx, dy, DW, DH]    ; [Self stringbyevaluatingjavascriptfromstring:jsstring];} @end

Friends familiar with canvas know that its functions are more than just those listed above. Since the recent work is more busy, first of all these more basic to everyone.

The last method, in particular, was one of my students who asked when they were doing the project. Ask if there is a way to intercept a picture on a webpage and let it show part of it.

I believe there are many friends who have similar needs. Code hastily tidy up, simple test, if there is negligence, please correct me.

The canvas of UIWebView's HTML5 extension