HTML教程 HTML教程HTML是什么HTML 代码编辑器HTML 基础标签HTML 元素HTML 属性HTML 标题HTML 段落HTML 文本格式化HTML CSSHTML 头部HTML链接HTML 图像HTML 区块和行内元素HTML 表格HTML 列表HTML 引用和定义元素HTML 计算机代码元素HTML 布局HTML 框架HTML 脚本/JavaScriptHTML 文件路径HTML 颜色HTML 字符(编码)和实体HTML URL(网址)HTML XHTMLHTML - Web服务器HTML空格符(空格的代码)HTML表单 HTML 表单HTML 表单属性HTML 表单元素HTML 表单input类型HTML 表单input属性HTML多媒体 HTML多媒体HTML5 教程 HTML5 教程 从入门到精通HTML5 拖放/拖拽HTML5 语义元素 HTML5 新的 Input 输入类型HTML5 新表单元素HTML5 新的表单属性HTML5 canvas画布HTML5 SVG矢量图形HTML5 Audio(音频)HTML5 Video(视频)HTML5 Web WorkersHTML5 存储HTML5 WebSocketHTML5 IndexedDBHTML5 IndexedDB增删改查HTML 参考手册 HTML 全局属性HTML 事件属性HTML 世界语言代码缩略词ascii码对照表HTML 完整的 ISO-8859-1 参考手册HTML 符号实体参考手册HTML 字符集HTML URL编码表HTML Canvas 参考手册SVG 参考手册HTML 音频/视频 document 参考手册

HTML Canvas 参考手册

HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。不过<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器), 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。本手册提供完整的 getContext("2d") 对象的属性和方法,可用于在画布上绘制矩形、圆形、文本、线条等等。

支持浏览器

注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

ChromeIEFirefoxsafarioprea


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


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


线条样式
属性描述
lineCap创建线段前端和末端圆角属性。
lineJoin创建两条线段交汇的边角类型。
lineWidth设置或返回当前的线条宽度。
miterLimit设置或返回最大斜接长度。


矩形
方法描述
rect()新建矩形的路径方法(无图案),该方法只能是矩形。
fillRect()于设置 绘制填充矩形,只能是矩形图形。
strokeRect()绘制矩形(无填充)。
clearRect()清除矩形内的区域。
路径
方法描述
fill()填充当前路径的图形。可以是三角形圆形矩形等形状。
stroke()绘制已定义的路径。
beginPath()起始一条路径,或重置当前路径。
moveTo()把路径移动到画布中的指定点,不创建线条。
closePath()创建当前点到起始点的直线路径。不包含涂画。
lineTo()创建一个新的起点路径。
clip()从原始画布剪切任意形状和尺寸的区域。
quadraticCurveTo()创建二次贝塞尔曲线。
bezierCurveTo()创建三次贝塞尔曲线。
arc()画圆弧路径的方法。
arcTo()画弧/圆角路径的方法。
isPointInPath()判断指定点是否在闭合的路径里面。
转换
方法描述
scale()缩放当前绘图至更大或更小。
rotate()旋转当前绘图。
translate()重新定义画布上的开始(0,0)位置。
transform()重新定义画布环境,可以为缩放、旋转、和移动。
setTransform()重新初始化画布环境,可以为缩放、旋转、和移动。
文本
属性描述
font设置当前文本字体属性,可字体样式、字体大小等。。
textAlign设置当前文本对齐方式。
textBaseline设置当前文本基线。
文本
方法描述
fillText()在画布绘制填色文本。
strokeText()在画布绘制(无填充色)文本。
measureText()返回包含指定文本宽度的对象。
图像绘制
方法描述
drawImage()向画布上绘制图像、画布或视频。
像素操作
方法描述
createImageData()创建像素对象。
getImageData()返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据。
putImageData()将图像数据(ImageData 对象)放回画布上。
像素操作
属性描述
width返回像素对象的宽度。
height返回像素对象的高度。
data返回一个对象,其包含指定的像素对象的图像数据。
合成
属性描述
globalAlpha设置或返回绘图的当前 alpha 或透明值。
globalCompositeOperation将一个源(新的)图像绘制到目标(已有)的图像上。
其它
方法描述
save()保存当前环境的状态。
restore()返回之前保存过的路径状态和属性。
createEvent()创建新的 Event 对象
getContext()获得用于在画布上绘图的对象
toDataURL()导出在 canvas 元素上绘制的图像