HTML5 Canvas 解读

/定义一个数组mapArray/

var mapArray = [ [0,1,0],

[1,0,1] ]

for(var x in mapArray){ //循环数组mapArray，此时x的值分别为0,1

for (var y in mapArray[x]){ //循环数组mapArray里面的每个单元，也就是[0,1,0]和 [1,0,1]，此时y的值分别为0,1,2 跟 0,1,2

if (mapArray[x][y] == 1){ //如果数组mapArray里面的单元中里面的值，如果有值为1的话

cxtfillStyle="#DDDDDD"; //设置填充样式

cxtfillRect(ycellSize,xcellSize,100,100); //填充一个矩形

1、声明依赖

依赖属性

最普遍的依赖称为外部依赖，这些依赖存放在外部仓库中。类似Maven，一个外部依赖可以由以下属性指定：

group属性指定依赖的分组（在Maven中，就是groupId）。

name属性指定依赖的名称（在Maven中，就是artifactId）。

version属性指定外部依赖的版本（在Maven中，就是version）。

classifier： 有时候需要另外一个属性来进一步的说明，比如说明运行时的环境 （Maven中，就是classifier）。

还有一种常见依赖是文件依赖，例如

dependencies {

// //putting all jars from 'libs' onto compile classpath

compile fileTree(include: ['jar'], dir: 'libs')

//declaring arbitrary files as dependencies

compile files('hibernatejar', 'libs/springjar')

}

以下是一些依赖配置项：

compile是默认的那个，其含义是包含所有的依赖包，即在APK里，compile的依赖会存在。

apk的意思是apk中存在，但是不会加入编译中，这个貌似用的比较少。

provided的意思是提供编译支持，但是不会写入apk。

testCompile和androidTestCompile会添加额外的library支持针对测试。

理解依赖的API

每个Gradle项目都有一个DependencyHandler的实例，你可以通过getDependencies()方法来获取依赖处理器的引 用，每一种依赖类型（如外部依赖、文件依赖等）在依赖处理器中都有一个相对应的方法。每一个依赖都是Dependency的一个实例，group, name, version, 和classifier这几个属性用来标识一个依赖，下图清晰的表示了项目(Project)、依赖处理器(DependencyHandler)和依赖三者之间的关系：

2、查看依赖关系

在文件目录下或 Android Studio的 Terminal下敲 gradlew -q app:dependencies 命令，便有以下输出（部分截图）：

（）星号标记表示是忽略这个依赖的意思，也就是说不去下载这个库。

（->）箭头符号表示被强转变依赖于

gradle对于需要多个版本的依赖库来说，一般只会下载你配置导入那个版本，如果没有手动导入，那就会下载所有模块依赖的最新版本那个库，面对多个模块依赖同一个库，每个模块不都会去下载该依赖库，而是下载一个该依赖库，共享给多个模块。

3、依赖冲突

Gradle解决冲突有以下几种方式

(1) 最近版本策略（默认）：下载较新版本

(2) 冲突失败策略：发生冲突时，编译失败（有些新版本库并不兼容之前的，因此这个库可以让开发者主动作出选择）

(3) 强制指定版本策略：发生冲突时，使用开发者指定的版本

排除传递依赖的方式有两种：

1直接在configuration中排除

configurations {

compileexclude module: 'commons'

allexclude group: 'orggradletestexcludes', module: 'reports'

}

2在具体的某个dependency中排除。

compile('orghibernate:hibernate:31') {

// 冲突时优先使用该版本

force = true

// 依据构建名称排除

exclude module: 'cglib'

// 依据组织名称排除

exclude group: 'orgjmock'

// 依据组织名称+构件名称排除

exclude group: 'orgunwanted', module: 'iAmBuggy'

// 为本依赖关闭依赖传递特性

transitive = false

}

compile("orgspringframework:spring-web:434RELEASE{

transitive = false

}

compile `orgspringframework:spring-web:434RELEASE@jar`

采用指定 transitive = false 的方式来关闭依赖传递特性，也可以采用添加@jar的方式忽略该依赖的所有传递性依赖。

exclude可以接收group和module两个参数，这两个参数可以单独使用也可以搭配使用，其中module可以理解为对应GAV中的artifactId，也就是compile group: ‘orggradletestclassifiers’, name: ‘service’, version: ‘10’中的中间name部分。

4、复制依赖文件

在buildgradle文件中加入如下代码

configurations {

//设置后不会复制下层依赖的文件

compiletransitive = false

}

task copyAllDependencies(type: Copy) {

//referring to the 'compile' configuration

from configurationscompile

into 'allLibs'

}

执行copyAllDependencies任务后，会将项目所依赖的所有（这里是第一层依赖的文件）文件都复制到allLibs目录下。

5、发布 artifacts

依赖配置也可以用来发布文件（这令人困惑）。 我们称这些文件publication artifacts, 或者就叫 artifacts。

插件可以很好的定义一个项目的 artifacts, 所以你并不需要做一些特别的工作来让 Gradle 需要发布什么 你可以通过在 uploadArchives 任务里加入仓库来完成 下面是一个发布远程 Ivy 库的例子:

发布一个 Ivy 库

uploadArchives {

repositories {

ivy {

credentials {

username "username"

password "pw"

}

url ">

canvas本身没有绘画能力，它的绘制工作必须在JavaScript的内部完成。

getContext()：getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。所以获取绘图环境是通过调试canvas对象的getContext()方法。

var canvas = documentqueryselector('#canvas')

var context = canvasgetContext('2d')

很多教程都将 context 翻译为上下文，但是我一直很不理解为什么翻译为上下文，难道是直译吗？我认为最好的解释应该是 canvas 对象的 getContext 方法返回一个具有很多绘图功能的对象，这是一个绘图环境，使用这个对象就可以 *** 作 canvas 元素进行绘制

DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行 *** 作。比如有一个 元素，可以直接用jquery增加click事件$('#p1')click(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体，图形本身实际都是Canvas的一部分，不可单独获取，所以也就无法直接给某个图形增加JavaScript事件。

Canvas的限制

在Canvas里，所有图形都绘制在帧上，绘制方法不会将绘制好的图形元素作为一个返回值输出，js也无法获取到已经绘制好的图形元素。比如：

代码如下:

cvs = documentgetElementById('mycanvas');

ctx = canvasgetContext('2d');

theRect = ctxrect(10, 10, 100, 100);

ctxstroke();

consolelog(theRect); //undefined

这段代码在canvas标签里绘制了一个矩形，首先可以看到绘制图形的rect方法没有返回值。如果打开浏览器的开发者工具，还可以看到canvas标签内部没有增加任何内容，而在js里获取到的canvas元素以及当前的上下文，也都没有任何表示新增图形的内容。

所以，前端常用的dom方法在canvas里是不适用的。比如点击上面Canvas里的矩形，实际点击的是整个Canvas元素。

给Canvas元素绑定事件

由于事件只能达到Canvas元素这一层，所以，如果想进一步深入，识别点击发生在Canvas内部的`哪一个图形上，就需要增加代码来进行处理。基本思路是：给Canvas元素绑定事件，当事件发生时，检查事件对象的位置，然后检查哪些图形覆盖了该位置。比如上面的例子里画过一个矩形，该矩形覆盖x轴10-110、y轴10-110的范围。只要鼠标点击在这个范围里，就可以视为点击了该矩形，也就可以手动触发矩形需要处理的点击事件。思路其实比较简单，但是实现起来还是稍微有点复杂。不仅要考虑这个判断过程的效率，有些地方还需要重新判断事件类型，设置要重新定义一个Canvas内部的捕获和冒泡机制。

首先要做的，是给Canvas元素绑定事件，比如Canvas内部某个图形要绑定点击事件，就需要通过Canvas元素代理该事件：

代码如下:

cvs = documentgetElementById('mycanvas');

cvsaddEventListener('click', function(e){

//

}, false);

接下来需要判断事件对象发生的位置，事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标。但是这个属性Opera不支持，Safari也打算移除，所以要做一些兼容写法：

代码如下:

function getEventPosition(ev){

var x, y;

if (evlayerX || evlayerX == 0) {

x = evlayerX;

y = evlayerY;

} else if (evoffsetX || evoffsetX == 0) { // Opera

x = evoffsetX;

y = evoffsetY;

}

return {x: x, y: y};

}

//注：使用上面这个函数，需要给Canvas元素的position设为absolute。

现在有了事件对象的坐标位置，下面就要判断Canvas里的图形，有哪些覆盖了这个坐标。

isPointInPath方法

Canvas的isPointInPath方法可以判断当前上下文的图形是否覆盖了某个坐标，比如：

代码如下:

cvs = documentgetElementById('mycanvas');

ctx = canvasgetContext('2d');

ctxrect(10, 10, 100, 100);

ctxstroke();

ctxisPointInPath(50, 50); //true

ctxisPointInPath(5, 5); //false

接下来增加一个事件判断，就可以判断一个点击事件是否发生在矩形上：

代码如下:

cvsaddEventListener('click', function(e){

p = getEventPosition(e);

if(ctxisPointInPath(px, py)){

//点击了矩形

}

}, false);

以上就是处理Canvas事件的基本方法，但是上面的代码还有局限，由于isPointInPath方法仅判断当前上下文环境中的路径，所以当Canvas里已经绘制了多个图形时，仅能以最后一个图形的上下文环境来判断事件，比如：

代码如下:

以上就是关于HTML5 Canvas 解读全部的内容，包括:HTML5 Canvas 解读、jsp怎么获取页面canvas里的图片元素、调用canvas对象的哪个方法来获取绘图环境等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！