canvas
来自W3c———————————————>>>
1、定义
Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域,做为html5新增的元素,通过脚本(通常是JavaScript)在其中绘制图像。一个画布在页面中是一个矩形框(可以使用多个canvas元素),通过<canvas>元素来绘制。<canvas>元素本身没有绘图能力,仅仅是图形的容器,所有的绘制工作必须在JavaScript内部完成 。
2、<canvas>元素
<canvas id="tutorial" width="300" height="150"></canvas>
只有两个可选的属性:width、height属性,如不设置,则默认width:300px、height:150px。使用css属性设置宽高的话,如果宽高属性和初始值比例不一致,会出现扭曲。
3、一些方法
getContext("2d"):内建的HTML5对象,提供用于在画布上绘图的方法和属性,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
fillStyle:css颜色、渐变、图案属性,默认#000。
fillRect(x, y, width, height):定义矩形当前的填充方式。
fillText(text, x, y):在canvas上绘制实心的文本。
strokeText(text,x,y):在canvas上绘制空心的文本。
渐变可以填充在矩形、圆形、线条、文本等,必须使用两种及以上的停止颜色。
createLinearGradient(x, y, x1, y1):创建线条渐变。
createRadialGradient(x, y, x1, y1):创建一个径向/圆形渐变。
addColorStop(num, colorString):指定颜色停止,参数使用坐标来描述,可以是0或1。
drawImage(image, x, y):把一幅图像放置到画布上。
ceatePattern(image, “repeat|repeat-x|repeat-y|no-repeat"):在指定的方向内重复指定的元素,被重复的元素[图片、视频、其他canvas元素,被重复的元素可用于绘制/填充矩形、圆形、线条等等。
4、坐标,路径
canvas是一个二维网格,左上角的坐标为(0,0)。 fillRect(0, 0, 150, 75)表示在画布(0,0)坐标位置绘制150*75的矩形。
在Canvas上画线:moveTo(x, y)定义线条开始坐标, lineTo(x, y)定义线条结束坐标,stroke()绘制线条。
渐变可以填充在矩形、圆形、线条、文本等。
Canvas参考手册
属性
1、fillStyle:设置或返回用于填充绘画的颜色、渐变或模式。默认值#000000,js语法:context.fillStyle = color / gradient / pattern;
color:默认值是#000000;
gradient:用于填充绘图的渐变对象(线性createLinearGradient或放射性createRadialGradient),和addColorStop一起使用。
pattern:用于填充绘图的pattern对象(createPattern(image, "repeat-*"))
2、strokeStyle:设置或返回用于笔触的颜色、渐变或模式。默认值#000000,js语法:context.strokeStyle = color / gradient / pattern;
3、shadowColor:设置或返回阴影颜色。默认值#000000,和shadowBlur属性一起创建阴影,通过shadowOffsetX和shadowOffsetY调节阴影,js语法:context.shadowColor = color;
4、shadowBlur:设置或返回阴影的模糊级数,默认值0,js语法:context.shadowColor = number;
5、shadowOffsetX:设置或返回阴影与形状的水平距离,默认值0,数值正/负表示阴影位于形状右/左方,js语法context.shadowOffsetX = number;
6、shadowOffsetY:设置或返回阴影与形状的水平距离,默认值0,数值正/负表示阴影位于形状下/上方,js语法context.shadowOffsetY = number;
方法
1、createLinearGradient():创建线性渐变对象,渐变可用于填充矩形、圆形、线条、文本。要使用addColorStop()方法规定不同颜色,以及在该对象中的何处定位颜色,该对象作为fillStyle、strokeStyle的属性值。
js语法:context.createLinearGradient(x0, y0, x1, y1);x0, y0, x1, y1表示渐变开始点和结束点。
2、createRadialGradient():创建放射性/环形的渐变,内容同上。
js语法:context.createRadialGradient(x0, y0,r0,x1, y1,r1);x0, y0,r0,x1, y1,r1表示渐变开始圆点开始点开始圆的半径和渐变结束点结束圆的半径。
3、createPattern():在指定方向内重复指定的元素,被重复的元素可用于绘制/填充矩形、圆形或线条等。
js语法:ceatePattern(image, “repeat|repeat-x|repeat-y|no-repeat");image表示规定使用的模式图片、画布、或视频元素,repeat-*重复方向。
4、addColorStop():规定渐变对象中的颜色和停止位置,可多次调用该方法改变渐变。
js语法:gradient.addColorStop(num,color);num:0.0~1.0之间的值,表示渐变中的开始与结束之间的位置,color表在num位置显示的css颜色。
线条样式
1、lineCap:设置或返回线条末端线帽的样式。默认值butt。js语法:context.lineCap = "butt | round | square";
butt:向线条的每个末端添加平直的边缘;
round:向线条的每个末端添加圆形线帽子;
square:向线条的每个末端添加正方形线帽;
2、lineJoin:设置或返回所创建边角的类型,当两条线交汇时。默认值miter。js语法:context.line.Join = "bevel | round | miter";
bevel:创建斜角;
round:创建圆角;
miter:创建尖角;
3、lineWidth:设置或返回当前线条的宽度,以像素计。默认值1,js语法:context.lineWith = number;
4、miterLimit:设置或返回最大倾接长度(指两个线交汇处内角和外角之间的
距离)。只有lineJoin属性值为miter时,miterLimit才有效。角度越小,miterLimit值越大。默认值10,js语法:context.miterLimit = number;
矩形
1、rect():创建矩形,使用stroke()或fill()方法在画布上实际绘制矩形。js语法:context.rect(x, y, width, height)。参数表左上角的坐标以宽高。
2、fillRect():绘制”被填充“的矩形。使用fillStyle属性来进行填充颜色、渐变、模式。js语法:context.fillRect(x, y, width, height)。参数分别表示矩形左上角坐标和宽高。
3、strokeRect():绘制矩形(无填充)。笔触默认颜色是黑色,使用strokeStyle属性设置笔触颜色、渐变或模式。js语法:context.strokeRect(x, y, width, height),参数表示矩形左上角的坐标以及宽高。
4、clearRect():在给定的矩形内清除指定的像素。js语法:context.clearRect(x, y, width, height);参数分别表示矩形左上角坐标及宽高。
路径
1、fill():填充当前绘图(路径)。使用fillStyle属性来填充另一种颜色/渐变。如果路径未关闭,那么fill()方法会从路径结束点到开始点之间添加一条线,已关闭该路径(如closePath),然后填充该路径。js语法:context.fill()。
2、stroke():实际地绘制出通过moveTo()和lineTo()方法定义的路径(绘制已定义的路径),默认颜色是黑色。js语法:context.stroke();
3、beginPath():开始一条路径,或重置当前路径。使用moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo()、arc()来创建路径。使用stroke()方法在画布上绘制确切路径。js语法:context.beginPath()。
4、closePath():创建从当前点到开始点的路径。使用stroke()方法在画布上绘制确切的路径,fillStyle属性填充另一个颜色/渐变,用fill()填充图像。js语法:context.closePath();
5、moveTo():把路径移动到画布中的指定点,不创建线条。使用stroke()在画布上绘制确切的路径。js语法:context.moveTo(x, y)。参数表示路径目标位置坐标。
6、lineTo():添加一个新点,然后在画布中创建从该点到最后指定点的线条(该方法并不会创建线条)。使用stroke()在画布上绘制确切的线条。js语法:context.lineTo(x, y);参数是路径目标位置的坐标。
7、clip():从原始画布中剪切任意形状和尺寸。js语法:context.clip()。提示:一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)。可以在使用clip()方法前通过使用save()方法对当前画布区域进行保存,并在以后的任意时间通过restore()方法对其进行恢复。
8、quadraticCurveTo():通过使用表示二次贝塞尔曲线的指定控制点,向当前路径添加一个点。路径不存在,使用beginPath()和moveTo()定义开始点。js语法:context.quadraticCurveTo(cpx, cpy, x, y);参数分别表示贝塞尔控制点坐标和结束点坐标。
9、bezierCurveTo():通过使用表示三次贝塞尔曲线的指定控制点,向当前路径添加一个点。路径不存在,使用beginPath()和moveTo()定义开始点。js语法:context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);参数分别表示第一个第二个贝塞尔控制点和结束点坐标。
10、arc():创建弧/曲线(用于创建圆形或部分圆)。把起始角设置为0,结束角设置为2*Math.PI。使用stroke()或fill()方法在画布上绘制实际的弧。js语法:context.arc(x, y, r, sAngle, eAngle, counterclockwise);参数分别表示圆的中心坐标、圆的半径、起始角、结束角(以弧度计,弧的圆形的三点钟方向位置是0度),是否顺时针绘制图(false顺时针,true逆时针)。
11、arcTo():在画布上创建介于两个切线之间的弧/曲线。使用stroke()在画布上绘制确切的弧。js语法:context.arcTo(x1, y1, x2, y2, r);参数分别表示两条切线的横纵坐标,第二条切线上一点的横纵坐标,弧的半径。