cansvas基础入门（一）

canvas，是一个H5的新标签，通过js来实现绘图的神奇功能。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

那么我们怎么来使用canvas标签呢？

注意，在这里我直接在行间设置了宽高，是因为若不设定宽高，浏览器会默认设置canvas大小为宽300、高100像素，而且不能使用css来设置（会被拉伸），建议直接写于canvas标签内部，或者是直接用js脚本中来设置。如下：

首先，获取canvas的绘图环境，这是一个封装了很多绘图功能的对象。

来举个栗子

我们使用了几个绘图方法：

1moveTo(x坐标 , y坐标) 可以理解为定位画笔在画布上的位置

2lineTo(x坐标 , y坐标) 顾名思义，就是画一条直线到某个点，此方法只做路径运动，并没有视觉上的效果。

3stroke() 描边方法 让运动路径从视觉上显现 用 画笔描出来

4strokeStyle 设定颜色的方法 可以直接用颜色名称，例如"red" "green",或者用十六进制颜色"#fff",还有rgb(0-255,0-255,0-255)， rgba(0-255,0-255,0-255,透明度)。

栗子2 用canvas写出两个不一样颜色的线 ：

关于路径beginPath和closePath

1、系统默认在绘制第一个路径的开始点为beginPath

2、如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制

ps：记住每次画路径都在前后加gd beginPath() 和gd closePath()

当然canvas也可以绘制出各种图形

栗子3 绘制矩形

绘制矩形有两个小方法：

1 contextfillRect(x,y,width,height) 所谓的满矩形就是填充一个矩形

2 strokeRect(x,y,width,height) 绘制矩形（不填色）。笔触的默认颜色是黑色。

相反 清除矩形区域即为

canvas更多有趣的东西，我们下次再讲~~~

新画面的加入不是在自定义view中进行的，是在一个activity中，其实这个自定义View最终还需要打包成jar文件，做成一个控件，服务器传来一个int[ ]，把这个数组传给这个控件，然后这个控件在原来画面（其实就是个坐标网，但是某些数据会实时变动）的基础上，画出这个int[ ]所代表的的界面 查看更多答案>>

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里已经绘制了多个图形时，仅能以最后一个图形的上下文环境来判断事件，比如：

代码如下:

package srcdemo;import androidcontentContext;import androidgraphicsCanvas;import androidgraphicsColor;import androidgraphicsPaint;import androidviewSurfaceHolder;import androidviewSurfaceHolderCallback;import androidviewSurfaceView;public class GameView extends SurfaceView{private Paint paint;private SurfaceHolder sf; public GameView(Context context) { super(context); sf =thisgetHolder(); sfaddCallback(new Callback () { public void surfaceDestroyed(SurfaceHolder holder) { // TODO Auto-generated method stub } public void surfaceCreated(SurfaceHolder holder) { Canvas canvas = sflockCanvas(); paint = new Paint (); paintsetColor(ColorYELLOW); canvasdrawLine(0, 0, 100, 100, paint); sfunlockCanvasAndPost(canvas); } public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) { // TODO Auto-generated method stub } }); }}

思路是这样的，把绘制的每个区域抽象成单独的对象，每个对象中可以储存各自的信息(比如title, content, position等)，每个对象中都包含各自的判断点是否在当前对象区域内的判断函数，这样就可以知道点到了哪个对象，也可以拿到对象内的数据， 触发相应的事件。

这样说可能不太直观，你可以看一下我封装好的一个库。

>

canvaswidth获取的是写在标签属性中的宽度值，eg :<canvas width="800" height="600"></canvas>

这时我们获取的canvas的宽度值是800px;但是如果canvas标签没有设置宽高属性，而是写在css样式表，或者style标签中，canvaswidth获取的是canvas的默认宽（canvas默认宽是300px,默认高是150px）

以上就是关于cansvas基础入门（一）全部的内容，包括:cansvas基础入门（一）、怎样获取onDraw（Canvas canvas）里的canvas对象啊大神们帮帮忙、HTML5中Canvas的事件处理介绍等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！