当前位置:首页 > 开发 > Web前端 > 前端 > 正文

第二章 Canvas API

发表于: 2012-03-06   作者:bsr1983   来源:转载   浏览次数:
摘要: 2.1 Canvas 概述 Canvas本质上是一个位图画布,其上绘制的图形是不可缩放的,不能像SVG图像那样可以被放大缩小。此外,用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间。 使用canvas编程,首先要获取其上下文(context)。接着在上下文中执行动作,最后将这些动作应用到上下文中。 canvas中的坐标是从左上角开始的,x轴沿着水平方

2.1 Canvas 概述

Canvas本质上是一个位图画布,其上绘制的图形是不可缩放的,不能像SVG图像那样可以被放大缩小。此外,用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间。

使用canvas编程,首先要获取其上下文(context)。接着在上下文中执行动作,最后将这些动作应用到上下文中。

canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸。左上角坐标为x=0,y-0的点称作原点。

同大多数HTML元素一样,canvas元素也可以通过应用CSS的方式来增加边框,设置内边距、外边距等,而且一些CSS属性还可以被canvas内的元素继承。

2.2 使用HTML5 Canvas API

修正——在绘制系统中的说法是变换——在应用的时候可以被顺序应用、组合或者随意修改。每个绘制操作的结果显示在canvas上之前都要经过修正层去做修正。虽然这么做增加了额外的复杂性,但却为绘制系统添加了更为强大的功能,可能像目前主流图像编辑工具那样支持实时图像处理,所以API中这部分内容的复杂性是必要的。

关于可重用代码有一条重要的建议:一般绘制都应从原点(坐标系的0,0点)开始,应用变换(缩放、平移、旋转等),然后不断修改代码直至达到希望的效果。

context路径函数

(1)moveTo(x,y):不绘制,只是将当前位置移动到新的目的坐标(x,y);

(2)lineTo(x,y):不仅将当前位置移动到新的目标坐标(x,y),而且在两个坐标之间画一条直线。

(3)closePath():这个函数的行为同lineTo很像,唯一的差别在于closePaht会将路径的起始坐标自动作为目标坐标。closePath还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭的区域,这对将来的填充和描边都非常有用。

(4)strokeRect():基于给出的位置和坐标画出矩形的轮廓。

(5)clearRect():清除矩形区域内所有内容并将它恢复到初始状态,即透明色。

(6)quadraticCurveTo():函数绘制曲线的起点是当前坐标,带有两组(x,y)边。第二组是指曲线的终点。第一组代表控制点(control point)。所谓的控制点位于曲线的旁边(不是曲线之上),其作用相当于对曲线产生一个拉力。通过调整控制点的位置,就可以改变曲线的曲率。

图片增加了canvas操作的复杂度:必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行的同时异步加载图片。如果视图在图片未完全加载之前就将其呈现到canvas上,那么canvas将不会显示任何图片。

渐变是指在颜色集上使用逐步抽样算法,并将结果应用于描边样式和填充样式中。

使用渐变需要三个步骤:

(1)创建渐变对象;

(2)为渐变对象设置颜色,指明过渡方式;

(3)context上为填充样式或者描边样式设置渐变。

要设置显示哪种颜色,在渐变对象上使用addColorStop函数即可。这个函数允许指定两个参数:颜色和偏移量。颜色参数是指开发人员希望在偏移位置描边或填充时所使用的颜色。偏移量是一个0.01.0之间的数值,代表沿着渐变线渐变的距离有多远。

除了线性渐变以外,HTML5 Canvas API 还支持放射性渐变,所谓放射性渐变就是颜色会介于两个指定圆间的锥形区域平滑变化。放射性渐变和线性渐变使用的颜色终止点是一样的。

createRadialGradient(x0,y0,r0,x1,y1,r1)

代码中,前三个参数代表以(x0,y0)为圆心,r0为半径的圆,后三个参数代表以(x1,y1)为圆心,r1为半径的另一个圆。渐变会在两个圆中间的区域出现。

scala函数带有两个参数来分别代表在xy两个维度的值。每个参数在canvas显示图像的时候,向其床底在本方向轴上图像要放大(或者缩小)的量。

要在原点执行图形和路径的变换操作,执行完后再统一平移。理由就是缩放(scale)和旋转(rotate)等变换操作都是针对原点进行的。

如果对一个不在原点的图形进行旋转变换,那么rotate变换函数会将图形绕着原点旋转而不是在原地旋转。

注意,剪裁过的“阴影”树会先被显示出来,这样一来,真正的树就会按照Z轴顺序(canvas中对象的重叠顺序)显示在阴影的上面。此外,树影的填充用到了CSSRGBA特性,通过特性我们将透明度值设置为正常情况下的20%

操作canvas文本的方式与操作其他路径对象的方式相同:可以描绘文本轮廓和填充文本内部;同事,所有能够应用于其他图形的变换和样式都能用于文本。

context对象的文本绘制功能由两个函数组成:

(1)fillText(text,x,y,maxwidth)

(2)strokeText(text,x,y,maxwidth)

两个函数的参数完全相同,必选参数包括文本参数以及用于指定文本位置的坐标参数。maxwidth是可选参数,用于限制字体大小,它会将文本字体强制收缩到指定尺寸。此外,还有一个measureText函数可供使用,该函数会返回一个度量对象,其中包含了在当前context环境下指定文本的实际显示宽度。

文本呈现相关的context属性

属性

备  注

font

CSS 字体字符串

例如:italic Arial,scan-serif

textAlign

startendleftrightcenter

默认是start

textBaseline

tophangingmiddlealphabeticideographicbottom

默认是alphabetic

阴影属性

属性

备注

shadowColor

任何CSS中的颜色值

可以使用透明度(alpha

shadowOffsetX

像素值

值为正数,向右移动阴影;值为负数,向左移动阴影

shadowOffsetY

像素值

值为正数,向下移动阴影;值为负数,向上移动阴影

shadowBlur

高斯模糊值

值越大,阴影边缘越模糊

Canvas API最有用的特性之一是允许开发人员直接访问canvas底层的像素数据。

(1)context.getImageData(sx,sy,sw,sh)。这个函数返回当前canvas状态并以数值数值的方式显示。具体来说,返回的对象包括三个属性。

width:每行有多少个像素。

height:每列有多少个像素。

data:一维数组,存有从canvans获取的每个像素的RGBA值。该数组为每个像素保存四个值——红、绿、蓝和alpha透明度。每个值都在0255之间。因此,canvas上的每个像素在这个数组中就变成了四个整数值。数组的填充顺序是从左到右,从上到下。

getImageData函数有四个参数,该函数只返回这四个参数所限定的区域内的数据。只有被xywidthheight四个参数框定的矩形区域内的canvas上的像素才会被取到。

在给定了widthheightcanvas上,在坐标(x,y)上的像素的构成如下。

红色部分:((width*y)+x)*4

绿色部分:((width*y)+x)*4+1

蓝色部分:((width*y)+x)*4+2

透明度部分:((width*y)+x)*4+3

(2)context.putImageData(imagedata,dx,dy) 该函数允许开发人员传入一组图像数据,其格式与最初从canvas上获取来的是一样的。

(3)context.createImageData(sw,sh) 这个函数可以创建一组图像数据并绑定在canvas对象上。

如果canvas中的图片并发来自包含它的页面所在的域,页面脚本将不能取得其中的数据。

第二章 Canvas API

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
  我觉得学一门新技术,边学边作记录,这样效果更好。以后关于我写的HTML5都是看《HTML5程序设计
Canvas对象表示一个html元素<canvas>,它自己并没有行为,但是它将绘图的API交给了客户端脚本j
3 Canvas
<canvas id="myCanvas" width="200" height="600"></canvas> <script type="text/ja
4 Canvas
Canvas 的主要结构是一个位图矩阵(从起构造参数需要一个位图Bitmap就可推断), 当进行 save 、sav
1、使用Canvas 在HTML页面添加<canvas></canvas>标签,然后用javascript控制它。 javas
HTML5高级程序设计:Canvas API 该文档重点探索如何使用HTML5的Canvas API。它可以用来动态生成和展
第二章 熟悉Extjs API (入门教程) 我们使用第一章的Window例子进行API讲解。 我们要为第一章的Windo
知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事
在HTML5 Canvas中,裁选区(clip region)可用于限制图像描绘的区域。其具体用法举例: 使用rect()函数
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号