189 8069 5689

canvashtml5,canvas h5

怎样在html5中添加canvas标签

canvas 标签是 HTML 5 中的新标签。

网站设计制作过程拒绝使用模板建站;使用PHP+MYSQL原生开发可交付网站源代码;符合网站优化排名的后台管理系统;网站设计、做网站收费合理;免费进行网站备案等企业网站建设一条龙服务.我们是一家持续稳定运营了10多年的创新互联网站建设公司。

定义和用法

canvas 标签定义图形,比如图表和其他图像。

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

实例

通过 canvas 元素来显示一个红色的矩形:

!DOCTYPE HTML

html

head

script type="text/javascript"

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('24d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

/script

/head

body

canvas id="myCanvas"your browser does not support the canvas tag /canvas

/body

/html

HTML5 - Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

在使用 canvas 绘制图像时,canvas 画布左上角的坐标为(0, 0)

注意:canvas 画布大小不可通过 css 来改变,只能通过属性方式设置,否则可能出现失帧的情况(当使用 css 方式改变 canvas 画布大小时,只是 cavas 标签的大小改变了,正真的绘图区域大小并没有改变,所以出现了失帧的情况)。

示例:

示例:

示例:

示例:

示例:

示例:

示例:

1)参数说明:

参数 x:矩形左上角的 x 坐标。

参数 y:矩形左上角的 y 坐标。

参数 width:矩形的宽度,以像素计。

参数 height:矩形的高度,以像素计。

2) 注意事项:

context.rect(x, y, width, height); 只是创建了矩形,并没有绘制出来。因此,创建完成后需使用 context.stroke(); 来绘制。

3)示例:

1)参数说明:

参数 x:矩形左上角的 x 坐标。

参数 y:矩形左上角的 y 坐标。

参数 width:矩形的宽度,以像素计。

参数 height:矩形的高度,以像素计。

2)默认的填充颜色是黑色。可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。

3)示例:

1)参数说明:

参数 x:矩形左上角的 x 坐标。

参数 y:矩形左上角的 y 坐标。

参数 width:矩形的宽度,以像素计。

参数 height:矩形的高度,以像素计。

2)笔触的默认颜色是黑色。

3)可以使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。

4)示例:

1)参数说明:

参数 x:要清除的矩形左上角的 x 坐标。

参数 y:要清除的矩形左上角的 y 坐标。

参数 width:要清除的矩形的宽度,以像素计。

参数 height:要清除的矩形的高度,以像素计。

小技巧:

当 x = 0,y = 0,width = canvas.width,height = canvas.height 时,则可以清除画布上的矩形

2)示例:

1)参数说明:

参数 x:圆中心的 x 坐标。

参数 y:圆中心的 y 坐标。

参数 r:圆的半径。

参数 sAngle:起始角弧度(圆的三点钟位置是0度)。

参数 eAngle:结束角弧度(圆的三点钟位置是0度)。

参数 counterclockwise:规定逆时针还是顺时针绘图。f'alse = 顺时针,true = 逆时针。

2) 角度和弧度的关系:角度/弧度 = 180/pi

3)创建完圆弧后需使用 context.stroke(); 绘制创建的圆弧。

4)示例:绘制一个圆

5)示例:绘制圆上任意一点

圆上任意一点坐标:x = ox + r*cos(弧度),y = oy + r*cos(弧度)

ox:圆心的 x 坐标。

oy:圆心的 y 坐标。

r:圆的半径。

2)设置字体水平对齐方式

2)设置字体垂直对齐方式

textBaseline 属性在不同的浏览器上效果不同,特别是使用 "hanging" 或 "ideographic" 时。

3)设置文字阴影效果

1)参数说明:

参数 text:文本内容

参数 x:开始绘制文本的 x 坐标位置(相对于画布)。

参数 y:开始绘制文本的 y 坐标位置(相对于画布)。

2)默认的填充颜色是黑色。可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。

3)示例:

1)参数说明:

参数 text:文本内容

参数 x:开始绘制文本的 x 坐标位置(相对于画布)。

参数 y:开始绘制文本的 y 坐标位置(相对于画布)。

2)默认的笔触颜色是黑色。可以使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。

3)示例:

1)参数说明:

参数 img:规定要使用的图像。

参数 x:在画布上放置图像的 x 坐标位置。

参数 y:在画布上放置图像的 y 坐标位置。

2)当图像的大小超出画布的大小时,超出的部分将不会被显示出来。

3)示例:

1)参数说明:

参数 img:规定要使用的图像。

参数 x:在画布上放置图像的 x 坐标位置。

参数 y:在画布上放置图像的 y 坐标位置。

参数 width:要使用的图像的宽度(伸展或缩小图像)。

参数 height:要使用的图像的高度(伸展或缩小图像)。

2)因保持 width/height = img.width/img.height,否则绘制后的图片会失帧。

3)示例:

1)参数说明:

参数 img:规定要使用的图像。

参数 sx:从图像的 sx 坐标位置开始剪切。

参数 sy:从图像的 sy 坐标位置开始剪切。

参数 swidth:剪切的宽度。

参数 sheight:剪切的高度。

参数 x:在画布上放置图像的 x 坐标位置。

参数 y:在画布上放置图像的 y 坐标位置。

参数 width:要使用的图像的宽度(伸展或缩小图像)。

参数 height:要使用的图像的高度(伸展或缩小图像)。

2)因保持 width/height = swidth/sheight,否则绘制后的图片会失帧。

3)示例:

stop:介于 0.0 与 1.0 之间的值,表示渐变中开始(0.0)与结束(1.0)之间的位置。

color:颜色。

示例:

HTML5中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 = document.getElementById('mycanvas');

ctx = canvas.getContext('2d');

theRect = ctx.rect(10, 10, 100, 100);

ctx.stroke();

console.log(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 = document.getElementById('mycanvas');

cvs.addEventListener('click', function(e){

//...

}, false);

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

代码如下:

function getEventPosition(ev){

var x, y;

if (ev.layerX || ev.layerX == 0) {

x = ev.layerX;

y = ev.layerY;

} else if (ev.offsetX || ev.offsetX == 0) { // Opera

x = ev.offsetX;

y = ev.offsetY;

}

return {x: x, y: y};

}

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

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

isPointInPath方法

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

代码如下:

cvs = document.getElementById('mycanvas');

ctx = canvas.getContext('2d');

ctx.rect(10, 10, 100, 100);

ctx.stroke();

ctx.isPointInPath(50, 50); //true

ctx.isPointInPath(5, 5); //false

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

代码如下:

cvs.addEventListener('click', function(e){

p = getEventPosition(e);

if(ctx.isPointInPath(p.x, p.y)){

//点击了矩形

}

}, false);

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

代码如下:


网站栏目:canvashtml5,canvas h5
网站网址:http://cdxtjz.com/article/dssjopg.html

其他资讯