html5 canvas 博客,html5 Canvas

Canvas

canvas就是一个画布,可以进行画任何的线,图形,填充等一系列操作,而且操作画图的就是js,所以让js编程到了嗑药的地步,另外,canvas不仅仅提供了简单的二维矢量绘图,也提供了三维的绘图,以及图片处理等一系列的API支持.

canvas通过js来绘制2d图形

1.canvas 是逐像素进行渲染的

2.在canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注,

如果其位置发生变化,那个整个场景也需要重新绘制,包括任何或许已被

覆盖的对象

图形修饰:

属性:

fillStyle 设置或者返回用于填充绘画的颜色,渐变和模式

strokeStyle 设置或者返回笔触的颜色,渐变和模式

shadowColor 设置或者返回用于阴影的颜色

shadowBlur 设置或者返回阴影的模糊级别

shadowOffsetX 设置或返回阴影矩形形状的水平距离

shadowOffsetY 设置或返回阴影矩形形状的垂直距离

例如:

context.strokeStyle = "#ffff00";

context.shadowColor = "#ff0000";

context.shadowOffsetX = 10;

context.shadowOffsetY = 10;

context.shadowBlur = 3;

context.strokeRect(100,100,100,100);

createLinearGradient() 创建线性渐变(用在画布内容上)

createPattern() 在指定的方向上重复指定的元素

createRadialGradient() 创建放射/环状的渐变(用在画布内容上)

addColorStop() 规定渐变对象中的颜色和停止位置

线性渐变

var gr = context.createLinearGradient(0, 0, 100, 0);

// Add the color stops.

gr.addColorStop(0,'rgb(255,0,0)');

gr.addColorStop(.5,'rgb(0,255,0)');

gr.addColorStop(1,'rgb(255,0,0)');

// Use the gradient for the fillStyle.

context.fillStyle = gr;

context.fillRect(0, 0,100,100);

解释:

先通过上下文对象context的方法创建一个线性渐变对象保存在变量gr中,即定义了一个从点(0,0)到点(100,0)一个线性渐变对象,然后addColorStop()则用于在相应的比例处设置颜色最后将渐变对象赋值给fillStyle,fillStyle对象不仅可以添加普通的颜色,也可以添加渐变

径向渐变createRadialGradient()

var gr = context.createRadialGradient(50,50,25,50,50,100);

// Add the color stops.

gr.addColorStop(0,'rgb(255,0,0)');

gr.addColorStop(.5,'rgb(0,255,0)');

gr.addColorStop(1,'rgb(255,0,0)');

// Use the gradient for the fillStyle.

context.fillStyle = gr;

context.fillRect(0, 0, 200, 200);

径向渐变里的六个参数分别是第一个圆的坐标和半径,第二个圆的坐标和半径

fillStyle里除了可以添加颜色和渐变外,还可以填充图形,这就要用到createPattern()这个方法

function drawScreen()

{

var

fillImg = new Image();

fillImg.src = 'fill_20x20.gif';

fillImg.onload = function()

{

var fillPattern = context.createPattern(fillImg,'repeat');

context.fillStyle = fillPattern;

context.fillRect(0,0,200,200);

}

}

上述代码将用于填充图形的功能封装成一个函数

通过上下文对象context的方法createPattern()来设置图形对象和重复方式;

重复方式:

• repeat

• repeat-x

• repeat-y

• no-repeat

这里有个重要的先后顺序,先加载图像,等成功加载后再给图像设定相应的填充模式

在html5页面中绘制一个矩形的步骤:

1.创建html页面,设置画布标签

2.编写js,获取画布dom对象

3.通过canvas对象获得上下文

4.指定绘制线样式,颜色

5.绘制矩形,或者填充矩形

getContext()方法:

为了在canvas上绘制,你必须首先得到一个画布上下文对象的引用,用本方法即可完成这一操作,格式如下:

context = canvas.getContext(contextId);

方法返回一个指定的contextId的上下文对象,如果指定的id不被支持,则返回null,当前唯一被强制必须被支持的是"2d",也许将来会有"3d"

canvas绘制图形,都是靠canvas对象的上下文对象

默认两种绘图方式:

1.绘制线:stroke

2.填充:fill

注意:在填充或者绘制线之前先设置样式

context.fillStyle = [value]

返回填充形状的当前风格,能被设置改变当前的填充风格,其值可以是css颜色子串,也可以是CanvasGradient或者CanvasPattern对象,非法的值将被忽略

例如:

context.fillStyle = 'rgba(50,0,0,0.7)';

context.strokeStyle = "#99cc33";

context.lineWidth = 10;

context.fillRect(....);

context.strokeRect(....);

圆弧:

context.arc(x,y,radius,startAngle,endAngle,anticlockwise);

绘制图像:

var image

= new Image();

image.src

= "images/1.jpg";

image.onload = function()

{

context.drawImage(this,0,0,200,200);

};

复杂形状(路径-paths)

绘图上下文总有一个当前路径,并且是仅此一个,它不是绘图状态的一部分,一个路径有0个或者多个子路径列表,每个子路径包含一个或者多个点列表(这些点组成直的或弯曲的线段),和一个标识子路径是否闭合的标志,少于两个点的子路径在绘图时会被忽略,在默认的情况下,图形上下文的路径有0个子路径.

调用格式:

context.beginPath() //清空子路径

context.closePath() //闭合路径

closePath方法在绘图上下文没有子路径时,什么也不做,否则,它先把最后一个子路径标示为闭合,然后建立一个包含最后子路径的第一个点的子路径,并加入到绘图上下文

canvas路径

1.canvas路径指存在以贝塞尔曲线为理论基础的区域绘制方式,绘制时产生的线条称之为路径,路径由一个或者多个直线段或者曲线段组成,或者是经过精确计算画出的特殊图形,路径是canvas实现绘图的基础

fill()填充当前绘图(路径)

stroke()绘制已定义的路径

beginPath()起始一条路径或者重置当前路径

moveTo()把路径移动到画布中的指定点,不创建线条

closePath()创建从当前点回到起始点的路径

lineTo()添加一个新点,然后在画布中创建从该点到最后指定点的线条

clip()从原始画布剪切任意形状和尺寸的区域

quadraticCurveTo()创建二次贝塞尔曲线

bezierCurveTo()创建三次贝塞尔曲线

arc()创建弧/曲线(用于创建圆形或部分圆)

arcTo()创建两切线之间的弧/曲线

isPointInPath()如果指定的点位于当前路径中,则返回true,否则返回false

function drawCircle(x,y,radius)

{

context.beginPath();

for(var i=0;i<360;i++)

{

context.lineTo(x+radius*Math.cos((Math.PI/180)*i),y+radius*Math.sin((Math.PI/180)*i));

}

context.closePath();

context.stroke();

}

上述代码使用三角函数实现了用于自己写的画圆操作

上下文对象context中的方法fillRect,arc,strokeRect,只不过是封装的了绘制相应图形的代码而已,我们也可以通过beginPath(),moveTo(),lineTo(),closePath(),stroke(),fill()来实现自己的封装函数

1.moveTo(x,y)

开始绘制一条直线,指定线条的起点

2.lineTo(x1,y1);

指定直线要到达的位置

3.stroke()

绘制路径

路径(线条)修饰

lineCap 设置或返回线条的结束端点样式

butt: 默认.向线条的每个末端加平直的边缘

round: 向线条的每个末端添加圆形线帽

square: 向线条的每个末端添加正方形线帽

lineJoin 设置或返回两条线相交时,所创建的拐角类型

miter: 默认,创建尖角

bevel: 创建斜角

round: 创建圆角

lineWidth

: 设置或者返回线条宽度

number: 当前线条宽度,以像素计

miterLimit 设置或者返回最长斜接长度

number: 正数,规定最大斜接长度5

斜接长度是指在两条线交汇处内角和外角之间的距离

只有当lineJoin属性为"miter"时,miterLimit才会有效

绘制二次贝塞尔曲线

quadraticCurve(cpx,cpy,x,y);

1通过使用表示二次贝塞尔曲线的指定控制点,向当前路径添加一个点

2.示例:

A.开始点:moveTo(20,20)

B.控制点:quadraticCurve(20,100,200,20);

参数:

cpx:贝塞尔控制点的x坐标

cpy:贝塞尔控制点的y坐标

x:结束点的x坐标

y:结束点的y坐标

绘制三次贝塞尔曲线

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

1通过使用表示三次贝塞尔曲线的指定控制点,向当前路径添加一个点

2.示例:

A.开始点:moveTo(20,20);

B.控制点+结束点:bezierCurveTo(20,100,200,100,200,20);

参数:

cp1x:第一个贝塞尔控制点的x坐标

cp1y:第一个贝塞尔控制点的y坐标

cp2x:第二个贝塞尔控制点的x坐标

cp2y:第二个贝塞尔控制点的y坐标

x:结束点的x坐标

y:结束点的y坐标

绘制弧线(用于创建圆形或者部分圆)

1.arc(x,y,r,sAngle,eAngle,counterclockwise)

x:圆的中心的x坐标

y:圆的中心的y坐标

r:圆的半径

sAngle:起始角,以弧度计算(弧的圆形的三点钟位置是0度)

eAngle:终止角,以弧度计算

counterclockwise:可选,规定应该逆时针还是顺时针绘图false=顺时针 true=逆时针

切线之间的弧度

arcTo(x1,y1,x2,y2,r)方法在画布上创建介于两个切线之间的弧/曲线

参数:

x1:弧的起点的x坐标

y1:弧的起点的y坐标

x2:弧的终点的x坐标

y2:弧的终点的y坐标

r:弧的半径

判断是否在路径之中

isPointInPath(x,y)

1 .方法返回true,说明指定的点位于当前路径中,否则返回false

canvas矩阵变换

所谓的矩阵转换是数学线性代数中的一个概念,在线性代数中,线性变换能够用矩阵来表示,而在图形图像学中,所谓的矩阵转换,一般是用来表示图形的变换,如:平移,旋转,缩放,斜切,而这些变化全部都是基于矩阵变换计算而出的,但是矩阵运算比较复杂,canvas已经把相应的变换封装成函数,我们可以直接使用从而简化了我们的工作,canvas里面的变换包括:平移,旋转,缩放,但是不包括斜切

canvas转换方法:

scale()缩放当前绘图至更大或更小

rotate()旋转当前绘图

translate()重新映射画布上的(0,0)位置

transform()替换绘图的当前矩阵转换

setTransform()将当前转换重置为单位矩阵,然后运行transform();

canvas转换方法注意问题

1.变换基点的问题(当图形变化的时候是以谁为基准点)

2.变换方法影响范围的问题(当使用了变换方法，会对哪些图形有影响)

3.保存和恢复状态的问题(如何只变换某个图形，而使的其他的图形保持原有的样式)

4.如何消除变形记忆的问题

5.关于清除画布的问题

context.translate();可以改变绘图上下文的笛卡尔坐标系的原点

例如将context.translate(100,100)之后,坐标系的原点就位于(100,100),context.fillRect(0,0,100,100)也将从(100,100)这个点开始绘制旋转的中心点亦位于该点

context.rotate(弧度)根据context.translate(x,y)来计算旋转的中心点

context.translate(100,100);

context.rotate(num * Math.PI/180);

context.translate(-50,-50);

上述代码的意思是,使旋转的中心店位于(100,100)处,然后再改变画布的位置

canvas绘制文本--属性

font:设置或返回文本内容的当前字体属性

textAlign:设置或者返回文本内容的当前对齐方式(水平对齐)

textBaseline:设置或者返回绘制文本时的当前文本基线

canvas绘制文本--方法

fillText(text,x,y,maxWidth)

在画布上绘制"被填充的"文本

text:规定在画布上输出的文本

x:

y:

maxWidth:可选,允许的最大文本宽度,以像素计

strokeText(text,x,y,maxWidth)与上同(文本无填充)

mearsure(Text)返回包含指定文本宽度的对象

text:要测量的文本

context.save()和context.restore()

在进行图形的变换的时候,设置了旋转,缩放,改变基点,这些操作都会有叠加效果,所以在进行变换之前对状态进行保存和恢复很有必要,如:context.rotate(30*Math.PI/180);context.rotate(30*Math.PI/180);

就会使得原来的图像旋转60度

canvas操作图像的方法

drawImage()向画布上绘制图像,画布或者视频

drawImage()方法也能够绘制图像的某些部分,以及或者增加或者减少图像的尺寸

drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

img规定要使用的图像,画布或者尺寸

sx可选,开始剪切的x坐标位置

sy可选,开始剪切的y坐标的位置

swidth可选,被剪切图像的宽度

sheight可选,被剪切图像的高度

x在画布上放置图像的x坐标的位置

y在画布上放置图像的y坐标的位置

width可选,要使用的图像的宽度(伸展或者缩小图像)

height可选,要使用的图像的高度(伸展或者缩小图像)

canvas图像的合成:

globalAlpha设置或者返回绘图的alpha或透明值

globalCompositeOperation设置或返回新图像如何绘制到已有的图像上

globalCompositeOperation属性设置或返回如何将一个源(新的)图像绘制到目标(已有的)图像上

源图像=您打算放置到画布上的绘图

目标图像=您已经放置在画布上的绘图

source-over 默认。在目标图像上显示源图像。

source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。

source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。

source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。

destination-over 在源图像上方显示目标图像。

destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。

destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。

destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。

lighter 显示源图像+ 目标图像。

copy  显示源图像。忽略目标图像。

source-over 使用异或操作对源图像与目标图像进行组合

canvas像素操作

canvas给我们提供了像素级别的操作,也就是说我们可以精确的控制画布当中的每一个像素,

可以使我们完成复杂的效果

canvas像素操作

width返回ImageData对象的宽度,以像素计

height返回ImageData对象的高度,以像素计

data返回一个对象,其包含指定的ImageData对象的图像数据,对于ImageData对象中的每个像素,都存在着四方面的信息,即RGBA值:

createImageData()创建新的,空白的ImageData对象

有两个版本的createImageData()方法:

1.以指定的尺寸(以像素计)创建新的ImageData对象:

var imgData = context.createImageData(width,height);

2.创建与指定的另一个ImageData对象尺寸相同的新的ImageData对象(不会复制图像数据)

var imgData = context.createImageData(imageData);

getImageData()返回ImageData对象,该对象为画布上指定的矩形复制像素数据

x:开始复制的左上角位置的x坐标

y:开始复制的左上角位置的y坐标

w:将要复制的矩形区域的宽度

h:将要复制的矩形区域的高度

putImageData()把图像数据(从指定的ImageData对象)放回画布上

imgData:规定要放回画布的ImageData对象

x:imageData对象左上角的坐标,以像素计

y:imageData对象左上角的坐标,以像素计

newx:可选.水平值(x),以像素计,在画布上放置图像的位置

newy:可选.水平值(y),以像素计,在画布上放置图像的位置

w:可选,在画布上绘制图像所使用的宽度

h:可选,在画布上绘制图像所使用的高度

putImageData(imgData,x,y);就将imgData显示在(x,y)处

putImageData(imgData,x,y,newx,newy,w,h);将imgData的一部分即,(newx,newy,w,h)这一部分显示在坐标(x,y)处

var imgData = context.getImageData(100,100,100,100);

for(var i=0;i

{

imgData.data[i*4+0]=255;//r

imgData.data[i*4+1]=0; //g

imgData.data[i*4+2]=0; //b

imgData.data[i*4+3]=255;//a

}

或者:

for(var i=0;i

{

for(var j=0;j

{

imgData.data[k*imgData.width*4 + i * 4 + 0] = 255;//r

imgData.data[k*imgData.width*4 + i * 4 + 1] = 0; //g

imgData.data[k*imgData.width*4 + i * 4 + 2] = 0; //b

imgData.data[k*imgData.width*4 + i * 4 + 3] = 255;//a

}

}

imgData对象含有三个重要的属性:width,height,data

data对象是一个数组,其中包含了每个像素的rgba,如果一个图像包含100像素,那么其imgData.data.length=4*100=400

因为每个data对象中的每个像素点都有四个值(r,g,b,a)

例如上面的代码就将每个每个像素点的rgba的值给更改了

再插一句:

imgData.data[0]是第一个像素的r值

imgData.data[1]是第一个像素的g值

imgData.data[2]是第一个像素的b值

imgData.data[3]是第一个像素的a值

imgData.data[4]是第二个像素的r值....