canvas学习(1)

--canvas.getContext("2d")


-- 矩形API
1rect() 创建矩形
2fillRect() 绘制“被填充”的矩形 3strokeRect() 绘制矩形(无填充)
 矩形API
1rect() 创建矩形
2fillRect() 绘制“被填充”的矩形 3strokeRect() 绘制矩形(无填充)
参数:x,y,width,height,


-- 颜色、样式和阴影方法
方法
描述
createLinearGradient()
创建线性渐变(用在画布内容上)
createPattern()
在指定的方向上重复指定的元素
createRadialGradient()
创建放射状/环形的渐变(用在画布内容上)
addColorStop()
规定渐变对象中的颜色和停止位置


--颜色、样式和阴影属性
属性
描述
fillStyle
设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle
设置或返回用于笔触的颜色、渐变或模式
shadowColor
设置或返回用于阴影的颜色
shadowBlur
设置或返回用于阴影的模糊级别
shadowOffsetX
设置或返回阴影距形状的水平距离
shadowOffsetY
设置或返回阴影距形状的垂直距离


--方法


描述
fill()
填充当前绘图(路径)
stroke()
绘制已定义的路径
beginPath()
起始一条路径,或重置当前路径
moveTo()
把路径移动到画布中的指定点,不创建线条
closePath()
创建从当前点回到起始点的路径
lineTo()
添加一个新点,然后在画布中创建从该点到最后指定点的线条
clip()
从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()
创建二次贝塞尔曲线
bezierCurveTo()
创建三次方贝塞尔曲线
arc()
创建弧/曲线(用于创建圆形或部分圆)
arcTo()
创建两切线之间的弧/曲线
isPointInPath()
如果指定的点位于当前路径中,则返回 true,否则返回 false


--属性


描述
lineCap
设置或返回线条的结束端点样式 butt:默认。向线条的每个末端添加平直的边缘 round:向线条的每个末端添加圆形线帽。 square:向线条的每个末端添加正方形线帽
lineJoin
设置或返回两条线相交时,所创建的拐角类型 miter:默认。创建尖角;bevel:创建斜角。 round:创建圆角。
lineWidth
设置或返回当前的线条宽度 number:当前线条的宽度,以像素计
miterLimit
设置或返回最大斜接长度 number:正数。规定最大斜接长度.5 斜接长度指的是在两条线交汇处内角和外角之间的距离 只有当 lineJoin 属性为 "miter" 时,miterLimit 才有效


--起始路径和关闭路径
 beginPath()
1开始一条路径,或重置当前的路径。
2. closePath()
 1创建从当前点到开始点的路径,关闭当前的绘图路径
3. 注意:
1如果画完前面的路径没有重新指定beginPath,那么画 第其他路径的时候会将前面最近指定的beginPath后的 全部路径重新绘制
2每次调用context.fill()的时候会自动把当次绘制的路 径的开始点和结束点相连,接着填充封闭的部分
绘制二次贝塞尔曲线


--1. quadraticCurveTo(cpx,cpy,x,y)
 1通过使用表示二次贝塞尔曲线的指定控制点,向
  当前路径添加一个点
2示例:
A.开始点:moveT o(20,20) B.控制点:quadraticCurveTo(20,100,200,20) C.结束点:quadraticCurveTo(20,100,200,20)
参数
描述
cpx
贝塞尔控制点的 x 坐标
cpy
贝塞尔控制点的 y 坐标
x
结束点的 x 坐标
y
结束点的 y 坐标


--绘制三次贝塞尔曲线


--1. bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
1 通过使用表示三次贝塞尔曲线的指定控制点,向当前路径 添加一个点
2 示例:
A. 开始点:moveT o(20,20) 
B. 控制点 1:bezierCurveTo(20,100,200,100,200,20) 
C. 控制点 2:bezierCurveTo(20,100,200,100,200,20) 
D. 结束点:bezierCurveT o(20,100,200,100,200,20) 
参数
描述
cp1x
第一个贝塞尔控制点的 x 坐标
cp1y
第一个贝塞尔控制点的 y 坐标
cp2x
第二个贝塞尔控制点的 x 坐标
cp2y
第二个贝塞尔控制点的 y 坐标
x
结束点的 x 坐标
y
结束点的 y 坐标


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


--arc(x,y,r,sAngle,eAngle,counterclockwise); 1 创建弧/曲线(用于创建圆或部分圆)
参数
描述
x
圆的中心的 x 坐标。
y
圆的中心的 y 坐标。
r
圆的半径。
sAngle
起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。
eAngle
结束角,以弧度计。
counterclockwi se
可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆 时针。


--切线之间的弧度


--. arcTo(x1,y1,x2,y2,r) 方法在画布上创建介于两 个切线之间的弧/曲线.
参数
描述
x1
弧的起点的 x 坐标
y1
弧的起点的 y 坐标
x2
弧的终点的 x 坐标
y2
弧的终点的 y 坐标
r
弧的半径


--裁剪区域


--. clip()方法从原始画布中剪切任意形状和尺寸
1 提示:一旦剪切了某个区域,则所有之后的绘图都会被限 制在被剪切的区域内(不能访问画布上的其他区域)。您 也可以在使用 clip() 方法前通过使用 save() 方法对当前画布
区域进行保存,并在以后的任意时间对其进行恢复 2 使用步骤:
A. 使用.save保证裁切前的绘图状态;
B. 通过context.rect()来确定要裁切的区域在位置;
C. 通过context.clip()来执行裁切动作;
D. 在Canvas上画图,只有在裁切区域的图形才能显示出来; E. 使用context.restore()再恢复到裁切前的状态


--判断是否在路径之中
--. isPointInPath(x,y)
1方法返回 true,说明指定的点位于当前路径中;
否则返回 false
参数
描述
x
测试的x坐标
y
测试的y坐标


--canvas矩阵变换
canvas转换方法
方法
描述
scale()
缩放当前绘图至更大或更小
rotate()
旋转当前绘图
translate()
重新映射画布上的 (0,0) 位置
transform()
替换绘图的当前转换矩阵
setTransform()
将当前转换重置为单位矩阵。然后运行 transform()
canvas转换方法注意问题


1.变换基点的问题(当图形变化的时候是以谁为基准点) 2.变换方法影响范围的问题(当使用了变换方法,会对哪些图形有影响) 3.保存和恢复状态的问题(如何只变换某个图形,而使的其他的图形
保持原有的样式) 4.如何消除变形记忆的问题 5.关于清除画布的问题
scale()缩放
参数
描述
scalewidth
缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
scaleheight
缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)
rotate()旋转
参数
描述
angle
旋转角度,以弧度计。 如需将角度转换为弧度,请使用 degrees*Math.PI/180 公式进行计算。
translate()平移
translate()重新映射画布上的 (0,0) 位置
参数
描述
x
添加到水平坐标(x)上的值
y
添加到垂直坐标(y)上的值
替换绘图的当前转换矩阵
transform() 允许您缩放、旋转、移动并倾斜当前的环境
参数
描述
a
水平缩放绘图
b
水平倾斜绘图
c
垂直倾斜绘图
d
垂直缩放绘图
e
水平移动绘图
f
垂直移动绘图
将当前转换重置为单位矩阵。然后运行transform()
setTransform() 方法把当前的变换矩阵重置为单位矩阵,然后以相
同的参数运行 transform()。
参数
描述
a
水平缩放绘图
b
水平倾斜绘图
c
垂直倾斜绘图
d
垂直缩放绘图
e
水平移动绘图
f
垂直移动绘图




--<canvas文字和图像>
<canvas绘制文本--属性>
属性
描述
font
设置或返回文本内容的当前字体属性
textAlign
设置或返回文本内容的当前对齐方式(水平对齐) start:默认。文本在指定的位置开始。 end:文本在指定的位置结束。 center:文本的中心被放置在指定的位置。 left:文本左对齐。
right:文本右对齐。
textBaseline
设置或返回在绘制文本时的当前文本基线(垂直对齐) alphabetic:默认。文本基线是普通的字母基线。 top:文本基线是 em 方框的顶端。 hanging:文本基线是悬挂基线
middle:文本基线是 em 方框的正中。
ideographic:文本基线是表意基线。
bottom:文本基线是 em 方框的底端。 Page3 作者:code宝宝 版权所有仿造必究
<canvas绘制文本--方法>
方法
描述
fillText(text,x,y,maxWidth)
在画布上绘制“被填充的”文本 text:规定在画布上输出的文本 x:开始绘制文本的 x 坐标位置(相对于画布) y:开始绘制文本的 y 坐标位置(相对于画布) maxWidth:可选。允许的最大文本宽度,以像素计
strokeText(text,x,y,maxWid th)
在画布上绘制文本(无填充) text:规定在画布上输出的文本 x:开始绘制文本的 x 坐标位置(相对于画布) y:开始绘制文本的 y 坐标位置(相对于画布) maxWidth:可选。允许的最大文本宽度,以像素计
measureText(text)
返回包含指定文本宽度的对象 text:要测量的文本


--<canvas操作图像--方法>
方法
描述
drawImage()
向画布上绘制图像、画布或视频
<canvas操作图像--方法drawImage()
rawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。
参数
描述
img
规定要使用的图像、画布或视频。
sx
可选。开始剪切的 x 坐标位置。
sy
可选。开始剪切的 y 坐标位置。
swidth
可选。被剪切图像的宽度。
sheight
可选。被剪切图像的高度。
x
在画布上放置图像的 x 坐标位置。
y
在画布上放置图像的 y 坐标位置。
width
可选。要使用的图像的宽度。(伸展或缩小图像)
height
可选。要使用的图像的高度。(伸展或缩小图像)
<canvas图像合成>
属性
描述
globalAlpha
设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation
设置或返回新图像如何绘制到已有的图像上
globalAlpha 属性设置或返回绘图的当前透明值(alpha 或 transparency)。
globalAlpha 属性值必须是介于 0.0(完全透明) 与 1.0(不透明) 之间的数字
值
描述
number
透明值。必须介于 0.0(完全透明) 与 1.0(不透明) 之间。


--<canvas图像合成>
globalCompositeOperation 属性设置或返回如何将一个源(新的)图 像绘制到目标(已有)的图像上。
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。
值
描述
source-over
默认。在目标图像上显示源图像。
source-atop
在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in
在目标图像中显示源图像。只有目标图像内的源图像部分会显示,目标图像是透明的。
source-out
在目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像是透明的。
destination-over
在源图像上方显示目标图像。
destination-atop
在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in
在源图像中显示目标图像。只有源图像内的目标图像部分会被显示,源图像是透明的。
destination-out
在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。
lighter
显示源图像 + 目标图像。
copy
显示源图像。忽略目标图像。
source-over
使用异或操作对源图像与目标图像进行组合。


--<canvas像素操作>
canvas给我们提供了像素级别的控制,也就是说我们可 以精确的控制画布当中的每一个像素,可以使我们完成 复杂的效果。
属性
描述
width
返回 ImageData 对象的宽度,,以像素计
height
返回 ImageData 对象的高度,,以像素计
data
返回一个对象,其包含指定的 ImageData 对象的图像数据
对于 ImageData 对象中的每个像素,都存在着四方面的信息,即 RGBA 值:
R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的,255 是完全可见的)
方法
描述
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 对象左上角的 x 坐标,以像素计
y:ImageData 对象左上角的 y坐标,以像素计 newx:可选。水平值(x),以像素计,在画布上放置图像的位置。 newy:可选。水平值(y),以像素计,在画布上放置图像的位置。 w:可选。在画布上绘制图像所使用的宽度。 h:可选。在画布上绘制图像所使用的高度。