【iOS】UIWebView的HTML5扩展之canvas篇
先前公布大那个所谓的"HTML5"扩展严格说来还算不是"HTML5"。曲曲几行JS代码就自诩为HTML5扩展多少有些标题党的嫌疑。
而相比之下，本篇的主题canvas能够说算是真正的HTML5扩展了。canvas作为HTML5标准体系下的JavaScript API, 不仅被苹果系统自带的Safari所支持，也被UIWebView类所支持。
以下直接贴上新增类目canvas部分的源码。
完整代码下载地址：https://github.com/duzixi/UIWebView-HTML5 （下载button在页面右下方。“Download ZIP” . 欢迎fork）
本篇博文首发地址：http://blog.csdn.net/duzixi
#pragma mark - #pragma mark 在网页上绘图 #import "UIColor+Change.h" //ver.2014.7.12 @implementation UIWebView (Canvas) /// 创建一个指定大小的透明画布 - (void)createCanvas:(NSString *)canvasId (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]; } /// 在指定位置创建一个指定大小的透明画布 - (void)createCanvas:(NSString *)canvasId (NSInteger)width height:(NSInteger)height x:(NSInteger)x y:(NSInteger)y { //[self createCanvas:canvasId 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]; } /// 绘制矩形填充 context.fillRect(x,y,width,height) - (void)fillRectOnCanvas:(NSString *)canvasId x:(NSInteger)x y:(NSInteger)y (NSInteger)width height:(NSInteger) height uicolor:(UIColor *)color { NSString *jsString = [NSString 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]; } /// 绘制矩形边框 strokeRect(x,y,width,height) - (void)strokeRectOnCanvas:(NSString *)canvasId x:(NSInteger)x y:(NSInteger)y (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]; } /// 清除矩形区域 context.clearRect(x,y,width,height) - (void)clearRectOnCanvas:(NSString *)canvasId x:(NSInteger)x y:(NSInteger)y (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]; } /// 绘制圆弧填充 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]; } /// 绘制一条线段 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]; } /// 绘制一条折线 - (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]; } /// 绘制贝塞尔曲线 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]; } /// 显示图像的一部分 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 dh:(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
熟知canvas的朋友都知道。它的功能绝不不过上面列出的这些。因为近期工作比較繁忙，先把这些比較主要的献给大家。尤其是最后一个方法。是我的一个学生做项目时问起的。
问是否有方法能截取网页上的图片，让它显示一部分。
相信也有很多朋友有类似的需求。代码匆忙整理，简单測试，若有疏忽。欢迎指正。