js代码自学记录--js的CanvasRenderingContext2D画布代码
CanvasRenderingContext2D.clearRect()
组中的所有像素矩形定义为起点(x, y)和大小(宽度、高度)透明的黑色,清除任何以前画的内容。
CanvasRenderingContext2D.fillRect()
画了一个填充矩形(x, y)位置的大小是由宽度和高度．
CanvasRenderingContext2D.strokeRect()
画一个矩形的起点(x, y)和有一个w宽度和一个h高度到画布上,使用当前中风风格。
绘制文本
下面的方法绘制文本。 看到也TextMetrics对象的文本属性。
CanvasRenderingContext2D.fillText()
吸引(充满)给定文本在给定的(x, y)位置。
CanvasRenderingContext2D.strokeText()
吸引(中风)给定文本在给定的(x, y)位置。
CanvasRenderingContext2D.measureText()
返回一个TextMetrics对象。
行风格
下面的方法和属性控制如何画线。
CanvasRenderingContext2D.lineWidth
宽度的线。 默认的1.0．
CanvasRenderingContext2D.lineCap
类型的结局结束的线。 可能的值:butt(默认),round，square．
CanvasRenderingContext2D.lineJoin
定义的类型的角落里,两条线在见面。 可能的值:round，bevel，miter(默认)。
CanvasRenderingContext2D.miterLimit
斜接限制比率。 默认的10．
CanvasRenderingContext2D.getLineDash()
返回当前行缓冲模式包含偶数个非负数字数组。
CanvasRenderingContext2D.setLineDash()
设置当前行缓冲模式。
CanvasRenderingContext2D.lineDashOffset
指定从哪里开始一个数组上划线。
文本样式
以下属性控制文本是如何布局的。
CanvasRenderingContext2D.font
字体设置。 默认值10px sans-serif．
CanvasRenderingContext2D.textAlign
文本对齐方式设置。 可能的值:start(默认),end，left，right，center．
CanvasRenderingContext2D.textBaseline
基线对齐设置。 可能的值:top，hanging，middle，alphabetic(默认),ideographic，bottom．
CanvasRenderingContext2D.direction
方向性。 可能的值:ltr，rtl，inherit(默认)。
填充和中风风格
内部填充样式用于颜色和款式形状和中风样式用于线周围的形状。
CanvasRenderingContext2D.fillStyle
颜色或样式使用内部形状。 默认的#000(黑色)。
CanvasRenderingContext2D.strokeStyle
颜色或样式用于周围的线的形状。 默认的#000(黑色)。
梯度和模式
CanvasRenderingContext2D.createConicGradient()
创建一个圆锥梯度所代表的围绕一个点的坐标参数。
CanvasRenderingContext2D.createLinearGradient()
创建一个线性梯度沿着线的坐标所代表的参数。
CanvasRenderingContext2D.createRadialGradient()
创建一个径向渐变由所代表的两个圆的坐标参数。
CanvasRenderingContext2D.createPattern()
创建一个使用指定的图像(一个模式CanvasImageSource)。 它重复的源方向重复指定的参数。 这个方法返回一个CanvasPattern．
阴影
CanvasRenderingContext2D.shadowBlur
指定模糊的效果。 默认值:0
CanvasRenderingContext2D.shadowColor
阴影的颜色。 默认值:完全透明黑色。
CanvasRenderingContext2D.shadowOffsetX
水平距离的阴影将抵消。 默认值:0．
CanvasRenderingContext2D.shadowOffsetY
垂直距离的阴影将抵消。 默认值:0．
路径
以下方法可以用来操纵对象的路径。
CanvasRenderingContext2D.beginPath()
开始一个新的路径清空sub-paths列表。 调用这个方法时,您想要创建一个新的路径。
CanvasRenderingContext2D.closePath()
导致的笔回到当前sub-path的开始。 它试图从当前指向画一条直线。 如果已经关闭或形状只有一个点,这个函数没有。
CanvasRenderingContext2D.moveTo()
移动的起点新sub-path (x, y)坐标。
CanvasRenderingContext2D.lineTo()
连最后一点在当前sub-path指定的(x, y)坐标与一条直线。
CanvasRenderingContext2D.bezierCurveTo()
添加一个立方贝塞尔曲线到当前路径。
CanvasRenderingContext2D.quadraticCurveTo()
增加了一个二次贝塞尔曲线到当前路径。
CanvasRenderingContext2D.arc()
添加一个圆弧到当前路径。
CanvasRenderingContext2D.arcTo()
增加了电弧电流路径与给定的控制点和半径,通过一条直线连接到前面的点。
CanvasRenderingContext2D.ellipse()
增加了一个椭圆的弧到当前路径。
CanvasRenderingContext2D.rect()
创建一个路径为一个矩形的位置(x, y)大小所决定的宽度和高度．
画出路径
CanvasRenderingContext2D.fill()
填补了当前sub-paths与当前填补风格。
CanvasRenderingContext2D.stroke()
当前sub-paths中风与当前中风风格。
CanvasRenderingContext2D.drawFocusIfNeeded()
如果一个给定的元素集中,这种方法吸引专注光环在当前路径。
CanvasRenderingContext2D.scrollPathIntoView()
卷轴当前路径或一个给定的路径到视图中。
CanvasRenderingContext2D.clip()
创建一个从当前sub-paths剪切路径。 所有的画后clip()被称为内出现剪切路径。 例如,看到的剪辑路径在画布上教程。
CanvasRenderingContext2D.isPointInPath()
报告是否包含指定的点在当前路径。
CanvasRenderingContext2D.isPointInStroke()
报告指定的点是否在该地区被抚摸的路径。
转换
中的对象CanvasRenderingContext2D渲染上下文有电流变换矩阵和方法来操纵它。 应用变换矩阵在创建当前的默认路径时,画文本、形状和Path2D对象。 下面列出的方法仍为历史和兼容性的原因DOMMatrix对象是用于API现在大部分地区和将用于未来。
CanvasRenderingContext2D.currentTransform
当前的变换矩阵(DOMMatrix对象)。
CanvasRenderingContext2D.getTransform()
检索当前的变换矩阵应用于上下文。
CanvasRenderingContext2D.rotate()
添加一个旋转变换矩阵。 角参数表示一个顺时针旋转角,用弧度表示的。
CanvasRenderingContext2D.scale()
添加一个扩展转换到画布单位垂直水平x和y。
CanvasRenderingContext2D.translate()
添加一个翻译转换通过移动画布和它的起源x供水管道上y垂直网格。
CanvasRenderingContext2D.transform()
复制当前的变换矩阵与矩阵描述的参数。
CanvasRenderingContext2D.setTransform()
重置当前单位矩阵变换,然后调用transform()方法用相同的参数。
CanvasRenderingContext2D.resetTransform()
重置当前由单位矩阵变换。
合成
CanvasRenderingContext2D.globalAlpha
α值应用于形状和图像合成到画布上。 默认的1.0(不透明的)。
CanvasRenderingContext2D.globalCompositeOperation
与globalAlpha应用集这样的形状和图像绘制到现有的位图。
画图片
CanvasRenderingContext2D.drawImage()
绘制指定图像。 这个方法有多种格式,使用提供了很大的灵活性。
像素操作
看到也ImageData对象。
CanvasRenderingContext2D.createImageData()
创建一个新的空白ImageData对象与指定的尺寸。 所有像素的新对象是透明的黑色。
CanvasRenderingContext2D.getImageData()
返回一个ImageData对象代表底层像素数据为画布用矩形的面积开始(sy sx)和有一个西南宽度和上海高度。
CanvasRenderingContext2D.putImageData()
油漆从给定的数据ImageData对象的位图。 如果提供了脏矩形,只有从矩形像素画。
图像的平滑
CanvasRenderingContext2D.imageSmoothingEnabled
图像平滑模式; 如果禁用,图片不会平滑扩展。
CanvasRenderingContext2D.imageSmoothingQuality
允许你设置图像平滑的质量。
画布上的状态
的CanvasRenderingContext2D渲染上下文包含各种绘画风格的状态(属性线风格,填补风格,阴影样式、文本风格)。 以下方法帮助你工作状态:
CanvasRenderingContext2D.save()
使用堆栈保存当前绘画风格的状态,这样你就可以恢复任何改变你使用restore()．
CanvasRenderingContext2D.restore()
绘画风格的状态恢复到最后一个元素的状态栈所救save()．
CanvasRenderingContext2D.canvas
一个只读指向HTMLCanvasElement。 可能是null如果它没有关联的< canvas>元素。
CanvasRenderingContext2D.getContextAttributes()
返回一个对象包含实际的上下文属性。 可以请求上下文属性HTMLCanvasElement.getContext()．
点击区域
CanvasRenderingContext2D.addHitRegion()
添加一个区域到画布上。
CanvasRenderingContext2D.removeHitRegion()
移除与指定的热门地区id从画布上。
CanvasRenderingContext2D.clearHitRegions()
删除所有地区的画布。
过滤器
CanvasRenderingContext2D.filter
一个CSS或SVG过滤器适用于画布上,例如,改变其亮度或bluriness。
非标准的api
眨眼和WebKit
这些api弃用和Chrome 36后不久就被移除．
CanvasRenderingContext2D.clearShadow()
删除所有阴影设置CanvasRenderingContext2D.shadowColor和CanvasRenderingContext2D.shadowBlur．
CanvasRenderingContext2D.drawImageFromRect()
这是冗余的等效过载drawImage．
CanvasRenderingContext2D.setAlpha()
使用CanvasRenderingContext2D.globalAlpha代替。
CanvasRenderingContext2D.setCompositeOperation()
使用CanvasRenderingContext2D.globalCompositeOperation代替。
CanvasRenderingContext2D.setLineWidth()
使用CanvasRenderingContext2D.lineWidth代替。
CanvasRenderingContext2D.setLineJoin()
使用CanvasRenderingContext2D.lineJoin代替。
CanvasRenderingContext2D.setLineCap()
使用CanvasRenderingContext2D.lineCap代替。
CanvasRenderingContext2D.setMiterLimit()
使用CanvasRenderingContext2D.miterLimit代替。
CanvasRenderingContext2D.setStrokeColor()
使用CanvasRenderingContext2D.strokeStyle代替。
CanvasRenderingContext2D.setFillColor()
使用CanvasRenderingContext2D.fillStyle代替。
CanvasRenderingContext2D.setShadow()
使用CanvasRenderingContext2D.shadowColor和CanvasRenderingContext2D.shadowBlur代替。
CanvasRenderingContext2D.webkitLineDash
使用CanvasRenderingContext2D.getLineDash()和CanvasRenderingContext2D.setLineDash()代替。
CanvasRenderingContext2D.webkitLineDashOffset
使用CanvasRenderingContext2D.lineDashOffset代替。
CanvasRenderingContext2D.webkitImageSmoothingEnabled
使用CanvasRenderingContext2D.imageSmoothingEnabled代替。
只眨眼
CanvasRenderingContext2D.isContextLost()
灵感来自相同的WebGLRenderingContext方法返回true如果画布背景已经丢失,或者false如果不是。
WebKit只
CanvasRenderingContext2D.webkitBackingStorePixelRatio
支持存储大小与画布元素。 看到高DPI帆布．
CanvasRenderingContext2D.webkitGetImageDataHD
用于高清支持商店,但从画布的规范。
CanvasRenderingContext2D.webkitPutImageDataHD
用于高清支持商店,但从画布的规范。
只壁虎
前缀的api
CanvasRenderingContext2D.mozCurrentTransform
设置或获取当前的变换矩阵,明白了CanvasRenderingContext2D.currentTransform．
CanvasRenderingContext2D.mozCurrentTransformInverse
设置或获取当前倒生的变换矩阵。
CanvasRenderingContext2D.mozImageSmoothingEnabled
看到CanvasRenderingContext2D.imageSmoothingEnabled．
CanvasRenderingContext2D.mozTextStyle
在壁虎1.9中引入的,弃用的CanvasRenderingContext2D.font财产。
CanvasRenderingContext2D.mozDrawText()
该方法是在壁虎1.9中引入的,删除从壁虎7.0。 使用CanvasRenderingContext2D.strokeText()或CanvasRenderingContext2D.fillText()代替。
CanvasRenderingContext2D.mozMeasureText()
该方法是在壁虎1.9中引入的,未实现的从壁虎7.0。 使用CanvasRenderingContext2D.measureText()代替。
CanvasRenderingContext2D.mozPathText()
该方法是在壁虎1.9中引入的,删除从壁虎7.0。
CanvasRenderingContext2D.mozTextAlongPath()
该方法是在壁虎1.9中引入的,删除从壁虎7.0。
内部api (chrome-context只有)
CanvasRenderingContext2D.drawWindow()
使一个地区的一个窗口canvas。 窗口的窗口呈现的内容,忽视视窗剪裁和滚动。
CanvasRenderingContext2D.demote()
这将导致一个上下文当前使用硬件加速后端回退一个软件。 所有的国家都应该被保留下来。
Internet Explorer
CanvasRenderingContext2D.msFillRule
的填写规则使用。 这一定是一个evenodd或nonzero(默认)。