HTML 标签 HTML <b>字体加粗 标签HTML <big> 大号字体 标签HTML <em> 强调标签HTML <strong> 重要事务标签HTML <dfn>定义实例标签HTML <code> 计算机代码 标签HTML <samp> 计算机输出 标签HTML <kbd> 用户输入 标签HTML <var> 变量 标签HTML <cite> 作品标题 标签HTML <i> 字体斜体 标签HTML <small> 侧记 标签HTML <sup>上标 标签HTML <sub>下标 标签HTML <ins>插入 标签HTML <del>删除 标签HTML <s>删除 标签HTML <strike> 删除标签HTML <u>下划线 标签HTML <tt>打印机文字 标签HTML <pre>预格式化的文本 标签HTML <abbr>缩写体 标签HTML <acronym>首字母缩写 标签HTML <address>联系信息 标签HTML <bdo>覆盖文本方向 标签HTML <blockquote> 长引用 标签HTML <q> 短引用 标签HTML <link> 外部资源 标签HTML <style> 样式标签HTML <title> 标题标签HTML <base>文档根 URL标签HTML <meta> 元数据标签HTML <script> 脚本标签HTML <noscript> 不支持脚本标签HTML <command> 定义命名标签HTML <head> 头部标签HTML <map> 图像映射标签HTML <img> 图像标签HTML <area> 图像映射区域标签HTML <a> 超链接标签HTML <div>块标签HTML <span>局部布局标签HTML <form> 表单 标签HTML <optgroup>选项组 标签HTML <option>选项 标签HTML <select> 下拉列表 标签HTML <datalist> 选项列表 标签HTML <input> 表单交互 标签 HTML <textarea> 多行文本 标签HTML <button> 按钮 标签 HTML <legend> 分组标题 标签HTML <fieldset> 分组 标签 HTML <label> 标识 标签 HTML <h1><h2><h3><h4><h5><h6>标题 标签HTML <hr> 水平线 标签HTML <ol> 有序列表 标签 HTML <li> 列表项 标签HTML <ul> 无序列表 标签HTML <dl>描述列表 标签HTML <dt>描述列表项目名 标签HTML <dd>描述列表子项目 标签HTML <output>输出 标签 HTML <p>段落 标签HTML <table>表格 标签HTML <tr>表格行 标签HTML <th>表标题 标签HTML <td>表单元格 标签HTML <caption>表名称 标签HTML <col>列属性 标签HTML <colgroup>列组合 标签HTML <thead>表格表头 标签HTML <tbody>表格主体 标签HTML <tfoot>表格底部 标签HTML <br>换行 标签HTML <object>对象 标签HTML <iframe>标签HTML <header> 区域页眉 标签HTML <footer> 区域页脚 标签HTML 参考手册 HTML 全局属性HTML 事件属性HTML 世界语言代码缩略词ascii码对照表HTML 完整的 ISO-8859-1 参考手册HTML 符号实体参考手册HTML 字符集HTML URL编码表HTML Canvas 参考手册

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 元素上绘制的图像