UIWebView的HTML5扩展之canvas篇

先前发布大那个所谓的"HTML5"扩展严格说来还算不是"HTML5"。曲曲几行JS代码就自诩为HTML5扩展多少有些标题党的嫌疑。

而相比之下，本篇的主题canvas可以说算是真正的HTML5扩展了。canvas作为HTML5标准体系下的JavaScript API, 不仅被苹果系统自带的Safari所支持，也被UIWebView类所支持。

下面直接贴上新增类目canvas部分的源代码。

完整代码下载地址：https://github.com/duzixi/UIWebView-HTML5 （下载按钮在页面右下方，“Download ZIP”  . 欢迎fork）

本篇博文首发地址：http://blog.csdn.net/duzixi

<pre name="code" class="objc">@interface UIWebView (Canvas)

///  创建一个指定大小的画布
- (void)createCanvas:(NSString *)canvasId
               width:(NSInteger)width
              height:(NSInteger)height;

///  在指定位置创建一个指定大小的画布
- (void)createCanvas:(NSString *)canvasId
               width:(NSInteger)width
              height:(NSInteger)height
                   x:(NSInteger)x
                   y:(NSInteger)y;

///  绘制矩形填充  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;

///  绘制矩形边框  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;

///  清除矩形区域  context.clearRect(x,y,width,height)
- (void)clearRectOnCanvas:(NSString *)canvasId
                        x:(NSInteger)x
                        y:(NSInteger)y
                    width:(NSInteger)width
                   height:(NSInteger) height;

///  绘制圆弧填充  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;

///  绘制一条线段 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;

///  绘制一条折线
- (void)linesOnCanvas:(NSString *)canvasId
               points:(NSArray *)points
             unicolor:(UIColor *)color
            lineWidth:(NSInteger)lineWidth;

///  绘制贝塞尔曲线 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;

///  绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy)
//     coming soon...

///  显示图像的一部分 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;

@end



#pragma mark -
#pragma mark 在网页上画图

#import "UIColor+Change.h" //ver.2014.7.12

@implementation UIWebView (Canvas)

///  创建一个指定大小的透明画布
- (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];
}

///  在指定位置创建一个指定大小的透明画布
- (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];
}

///  绘制矩形填充  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 = [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 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];
}

///  清除矩形区域  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];
}

///  绘制圆弧填充  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的朋友都知道，它的功能绝不仅仅是上面列出的这些。由于最近工作比较繁忙，先把这些比较基本的献给大家。


尤其是最后一个方法，是我的一个学生做项目时问起的。问是否有方法能截取网页上的图片，让它显示一部分。


相信也有许多朋友有类似的需求。代码匆忙整理，简单测试，若有疏忽，欢迎指正。
				


				
时间： 2024-08-09 04:16:39 

		


		


	

	
	

		


		
UIWebView的HTML5扩展之canvas篇的相关文章


								

		

			

                UIWebView 的 HTML5 扩展
			

		

		

									

				http://blog.csdn.net/duzixi/article/details/36047201 对于不少iOS开发者来说,HTML5的内容比较陌生. 尤其是UIWebView类的 stringByEvaluatingJavaScriptFromString 方法 让很多人觉得又得学一种新的语言. 而这一部分也是项目中学生常问的问题之一. 本文以Category(类目)的方式扩展了UIWebView类,将一些常用的JavaScript操作封装成UIWebView类方法. 最新源代码下载地			

		

	

				

		

			

                玩转 html5 (二) ---- 用 canvas 结合脚本在画布上画简单的图 (html5 又一强大功能)
			

		

		

									

				在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字. 在代码中均给出了注释,在这里特别强调的一点是:使用canvas画图时有时候必须beginPath和colsePath,但有时不需要,为了防止出现问题,可以在每次重新画一个图时重新开启路径,画完后关闭路径. 这些代码是在猎豹浏览器上实现的,有些浏览器可能不支持. [html] view plaincopy <!DOCTYPE html> <me			

		

	

				

		

			

                HTML5中的&lt;canvas&gt;画布:简单介绍(0)
			

		

		

									

				<canvas> 标签是 HTML 5 中的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件, 其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与css3权威指南>下面对其中最好玩的canvas的学习做下读书笔记与实 验.温馨提示:以下所有实验请使用最新版的opera,火狐. 定义: <canvas> 标签定义图形,比如图表和其他图像. <canvas> 标签只是图形容器,您必须使用脚本(javascript)来绘制图形.			

		

	

				

		

			

                HTML5中的canvas基本概念及绘图
			

		

		

									

				* Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的图形与HTML页面无关 * 无法通过DOM获取绘制的图形 * 无法为绘制的图形绑定DOM事件 * 只能使用Canvas提供的API * Canvas用途 * 在HTML页面中绘制图表(例如柱状图.饼状图等) * 网页游戏 - Flash技术 * 使用HTML5中的Canvas * 如何使用Canvas * 在			

		

	

				

		

			

                碎裂效果尝试(canvas篇)
			

		

		

									

				为什么会有这篇博文,因为昨天我的杯子碎了,同个办公室的人手机屏幕碎了……碎碎平安 既然说的是碎裂效果,那什么是碎裂呢,看看生活中的 总而言之就是完整的一块,碎成了好些块. 进入正题,canvas对于图像处理很强,毕竟直接操作像素,马赛克,翻转,二值化都很方便.但是经过我的一番尝试,说实话,canvas分割图像这方面还真挺麻烦的…… 当然可能我的实现思路有问题,绕了弯,如果有更好地方法请指教,万分感激 讲了这么多,先看看几张gif,这样才有兴趣继续往下看嘛 特地让其动了起来,录制gif有点卡,真实			

		

	

				

		

			

                html5学习(一)--canvas画时钟
			

		

		

									

				利用空余时间学习一下html5. 1 <!doctype html> 2 <html> 3 <head></head> 4 <body> 5 <canvas id="clock" width="500" height="500"></canvas> 6 <script> 7 var clock=document.getElementById('cloc			

		

	

				

		

			

                用html5中的canvas写的时钟
			

		

		

									

				<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&			

		

	

				

		

			

                Html5新特性 &lt;canvas&gt;画板画直线
			

		

		

									

				 下面例子为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht			

		

	

				

		

			

                NHibernate Linq查询 扩展增强 (第九篇)
			

		

		

									

				NHibernate Linq查询 扩展增强 (第九篇) 在上一篇的Linq to NHibernate的介绍当中,全部是namespace NHibernate命名空间中的IQueryOver<TRoot, TSubType>接口提供的.IQueryOver<TRoot, TSubType>这个借口实际上会被翻译成条件查询(Criteria Queries). 实际上Linq to NHibernate更加强大.我们先引入命名空间NHibernate.Linq,这里面有Linq