菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何 W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA 生成式 AI SCIPY AWS 网络安全 数据科学
     ❯   

JS 参考手册

按类别划分的 JS 按字母划分的 JS

JavaScript

JS 数组 JS 布尔值 JS 类 JS 日期 JS 错误 JS 全局 JS JSON JS Map JS Math JS 数字 JS 对象 JS 运算符 JS 优先级 JS Promise JS 正则表达式 JS Set JS 语句 JS 字符串 JS TypedArray

Window

Window 对象 Window Console Window History Window Location Window Navigator Window Screen

HTML DOM

HTML 文档 HTML 元素 HTML 属性 HTML 集合 HTML NodeList HTML DOMTokenList HTML 样式
alignContent alignItems alignSelf animation animationDelay animationDirection animationDuration animationFillMode animationIterationCount animationName animationTimingFunction animationPlayState background backgroundAttachment backgroundClip backgroundColor backgroundImage backgroundOrigin backgroundPosition backgroundRepeat backgroundSize backfaceVisibility border borderBottom borderBottomColor borderBottomLeftRadius borderBottomRightRadius borderBottomStyle borderBottomWidth borderCollapse borderColor borderImage borderImageOutset borderImageRepeat borderImageSlice borderImageSource borderImageWidth borderLeft borderLeftColor borderLeftStyle borderLeftWidth borderRadius borderRight borderRightColor borderRightStyle borderRightWidth borderSpacing borderStyle borderTop borderTopColor borderTopLeftRadius borderTopRightRadius borderTopStyle borderTopWidth borderWidth bottom boxShadow boxSizing captionSide caretColor clear clip color columnCount columnFill columnGap columnRule columnRuleColor columnRuleStyle columnRuleWidth columns columnSpan columnWidth counterIncrement counterReset cssFloat cursor direction display emptyCells filter flex flexBasis flexDirection flexFlow flexGrow flexShrink flexWrap font fontFamily fontSize fontStyle fontVariant fontWeight fontSizeAdjust height isolation justifyContent left letterSpacing lineHeight listStyle listStyleImage listStylePosition listStyleType margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth objectFit objectPosition opacity order orphans outline outlineColor outlineOffset outlineStyle outlineWidth overflow overflowX overflowY padding paddingBottom paddingLeft paddingRight paddingTop pageBreakAfter pageBreakBefore pageBreakInside perspective perspectiveOrigin position quotes resize right scrollBehavior tableLayout tabSize textAlign textAlignLast textDecoration textDecorationColor textDecorationLine textDecorationStyle textIndent textOverflow textShadow textTransform top transform transformOrigin transformStyle transition transitionProperty transitionDuration transitionTimingFunction transitionDelay unicodeBidi userSelect verticalAlign visibility width wordBreak wordSpacing wordWrap widows zIndex

HTML 事件

HTML 事件 HTML 事件对象 HTML 事件属性 HTML 事件方法

Web API

API Canvas API Console API Fetch API Fullscreen API 地理位置 API History API MediaQueryList API Storage API 验证 API Web

HTML 对象

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> 按钮 <input> 复选框 <input> 颜色 <input> 日期 <input> 日期时间 <input> 日期时间-本地 <input> 电子邮件 <input> 文件 <input> 隐藏 <input> 图片 <input> 月份 <input> 数字 <input> 密码 <input> 单选按钮 <input> 范围 <input> 重置 <input> 搜索 <input> 提交 <input> 文本 <input> 时间 <input> URL <input> 周 <kbd> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <tfoot> <th> <thead> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

其他参考

CSSStyleDeclaration JS 转换


HTML DOM Canvas

<canvas> 元素在 HTML 页面中定义了一个位图区域。

Canvas API 允许 JavaScript 在 canvas 上绘制图形

Canvas API 可以绘制形状、线条、曲线、方框、文本和图像,并带有颜色、旋转、透明度以及其他像素操作。

将 Canvas 添加到 HTML

您可以使用 <canvas> 标签将 canvas 元素添加到 HTML 页面的任何位置

示例

<canvas id="myCanvas" width="300" height="150"></canvas>
自己动手试一试 »

如何访问 Canvas 元素

您可以使用 HTML DOM 方法 getElementById() 访问 <canvas> 元素

const myCanvas = document.getElementById("myCanvas");

要在 canvas 中绘图,您需要创建一个 2D 上下文对象

const ctx = myCanvas.getContext("2d");

注意

HTML <canvas> 元素本身没有绘图能力。

您必须使用 JavaScript 来绘制任何图形。

getContext() 方法返回一个带有绘图工具(方法)的对象。


在 Canvas 上绘图

创建 2D 上下文后,您可以在 canvas 上绘图。

fillRect() 方法绘制一个黑色的矩形,其左上角位于位置 20,20。该矩形宽 150 像素,高 100 像素。

示例

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

ctx.fillRect(20, 20, 150, 100);
自己动手试一试 »

使用颜色

fillStyle 属性设置绘图对象的填充颜色

示例

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
自己动手试一试 »

您还可以使用 document.createElement() 方法创建一个新的 <canvas> 元素,并将其添加到现有的 HTML 页面中

示例

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
自己动手试一试 »

路径

在 canvas 上绘图的常用方法是

  1. 开始路径 - beginPath()
  2. 移动到某个点 - moveTo()
  3. 在路径中绘制 - lineTo()
  4. 绘制路径 - stroke()

示例

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();
自己动手试一试 »

Canvas API 完整参考

本参考涵盖了 getContext("2d") 对象的所有属性和方法,用于在 canvas 上绘制文本、线条、方框、圆形、图片等。

绘图方法

直接在 canvas 上绘图的方法只有 3 个

方法 描述
fillRect() 绘制一个“填充”矩形
strokeRect() 绘制一个矩形(无填充)
clearRect() 清除矩形内指定的像素

路径方法

方法 描述
beginPath() 开始新路径或重置当前路径
closePath() 从当前点到起始点添加一条线到路径
isPointInPath() 如果指定点在当前路径中,则返回 true
moveTo() 将路径移动到 canvas 中的某个点(不绘制)
lineTo() 向路径添加一条线
fill() 填充当前路径
rect() 向路径添加一个矩形
stroke() 绘制当前路径
 圆形和曲线
bezierCurveTo() 向路径添加一条三次贝塞尔曲线
arc() 向路径添加一条弧线/曲线(圆形或圆形的一部分)
arcTo() 在两条切线之间向路径添加一条弧线/曲线
quadraticCurveTo() 向路径添加一条二次贝塞尔曲线


文本

方法/属性 描述
direction 设置或返回用于绘制文本的方向
fillText() 在 canvas 上绘制“填充”文本
font 设置或返回文本内容的字体属性
measureText() 返回一个包含指定文本宽度的对象
strokeText() 在 canvas 上绘制文本
textAlign 设置或返回文本内容的对齐方式
textBaseline 设置或返回绘制文本时使用的文本基线

颜色、样式和阴影

方法/属性 描述
addColorStop() 指定渐变对象中的颜色和停止位置
createLinearGradient() 创建一个线性渐变(用于 canvas 内容)
createPattern() 在指定方向重复指定元素
createRadialGradient() 创建一个径向/圆形渐变(用于 canvas 内容)
fillStyle 设置或返回用于填充绘图的颜色、渐变或图案
lineCap 设置或返回线条末端帽的样式
lineJoin 设置或返回两条线相交时创建的角的类型
lineWidth 设置或返回当前线宽
miterLimit 设置或返回最大斜接长度
shadowBlur 设置或返回阴影的模糊级别
shadowColor 设置或返回用于阴影的颜色
shadowOffsetX 设置或返回阴影与形状的水平距离
shadowOffsetY 设置或返回阴影与形状的垂直距离
strokeStyle 设置或返回用于描边的颜色、渐变或图案

变换

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

图像绘制

方法 描述
drawImage() 将图像、canvas 或视频绘制到 canvas 上

ImageData 对象 / 像素操作

方法/属性 描述
createImageData() 创建一个新的空白 ImageData 对象
getImageData() 返回一个 ImageData 对象,该对象复制 canvas 上指定矩形的像素数据
ImageData.data 返回一个包含指定 ImageData 对象的图像数据的对象
ImageData.height 返回 ImageData 对象的高度
ImageData.width 返回 ImageData 对象的宽度
putImageData() 将图像数据(来自指定的 ImageData 对象)重新放置到 canvas 上

合成

属性 描述
globalAlpha 设置或返回绘图的当前 alpha 或透明度值
globalCompositeOperation 设置或返回新图像如何绘制到现有图像上

其他方法

方法 描述
clip() 从原始 canvas 中剪裁出任何形状和大小的区域
save() 保存当前绘图上下文及其所有属性的状态
restore() 恢复之前保存的状态和属性
createEvent()  
getContext()  
toDataURL()  

标准属性和事件

canvas 对象还支持标准 属性事件


相关页面

Canvas 教程:Canvas 教程

HTML 教程:HTML5 Canvas

HTML 参考:HTML <canvas> 标签


浏览器支持

<canvas> 元素是 HTML5 标准(2014)。

Canvas API 在所有现代浏览器中都受支持

Chrome Edge Firefox Safari Opera IE
9-11

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持