HTML Canvas 示例

❮ 上一篇下一篇 ❯

自己尝试的示例

以下示例直接将 Canvas 嵌入到 HTML 代码中。

所有主流浏览器都支持 HTML Canvas。

Canvas 简介

一个空的 canvas canvas 上的第一个绘图

Examples explained

Canvas 坐标

绘制一个矩形绘制一条线绘制一个圆形

Examples explained

Canvas 线条

绘制一条线 lineWidth - 设置线宽 strokeStyle - 设置线的颜色 lineCap - 设置线的端点样式

Examples explained

Canvas 填充和描边

fillStyle - 设置填充颜色 strokeStyle - 设置轮廓颜色 fillStyle 和 strokeStyle 组合使用 fillStyle 和 strokeStyle 带有 alpha 通道（不透明度）

Examples explained

Canvas 形状

创建直线形状创建一个三角形使用 strokeStyle 为形状着色

Examples explained

Canvas 矩形

rect() - 定义一个矩形 fillRect() - 绘制一个填充矩形 fillStyle - 矩形的填充颜色 strokeRect() - 绘制一个描边（轮廓）矩形 strokeStyle - 设置轮廓颜色使用 rect() 方法创建三个矩形使用 strokeRect() 方法创建三个矩形

Examples explained

Canvas clearRect()

清除填充矩形中的矩形区域清除填充矩形内部和外部的矩形区域清除描边矩形中的矩形区域

Examples explained

Canvas 圆形

绘制一个完整的圆形绘制带颜色的完整圆形绘制半圆形绘制从起始角度 0 到结束角度 0.5 * PI 的圆弧绘制从起始角度 0 到结束角度 0.5 * PI 的逆时针圆弧

Examples explained

Canvas 曲线

quadraticCurveTo() - 绘制二次贝塞尔曲线 bezierCurveTo() - 绘制三次贝塞尔曲线

Examples explained

Canvas 线性渐变

创建带有两个颜色站点的线性渐变用渐变填充描边矩形创建带有三个颜色站点的线性渐变创建垂直线性渐变（改变 y 轴参数值 (y2)）创建对角线性渐变（同时改变 x 轴和 y 轴参数）用渐变填充圆形用渐变填充文本用渐变填充描边文本

Examples explained

Canvas 径向渐变

创建带有两个颜色站点的径向渐变带有较小结束圆的径向渐变移动结束圆的中心点带有三个颜色站点的径向渐变

Examples explained

Canvas 文本

fillText() - 绘制填充文本 strokeText() - 绘制描边文本 font - 为字体添加粗体和斜体

Examples explained

Canvas 文本颜色

fillStyle - 设置文本的填充颜色 strokeStyle - 设置文本的轮廓颜色用渐变填充文本用渐变填充描边文本

Examples explained

Canvas 文本对齐

textBaseline - 设置文本的基线（垂直对齐） textAlign - 设置文本的水平对齐文本垂直和水平居中

Examples explained

Canvas 阴影

shadowColor - 设置形状的阴影颜色 shadowColor - 设置文本的阴影颜色 shadowBlur - 设置形状阴影的模糊量 shadowBlur - 设置文本阴影的模糊量 shadowOffsetX - 设置阴影与形状的水平距离 shadowOffsetY - 设置阴影与形状的垂直距离

Examples explained

Canvas 图像

drawImage(image, dx, dy) - 在 canvas 上定位图像 drawImage(image, dx, dy, dwidth, dheight) - 定位图像，并指定图像在 canvas 上的宽度和高度 drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight) - 在将源图像放置到 canvas 上之前裁剪它

Examples explained

Canvas 变换

translate() - 按 x 和 y 移动对象/元素 translate() - 按 x 和 y 移动对象/元素 rotate() - 将矩形旋转 20 度 rotate() - 将两个矩形旋转 20 度 scale() - 放大元素 scale() - 缩小元素 scale() - 将宽度缩放至 200%，高度缩放至 300% scale() - 用滑块缩放 transform() - 将当前变换与参数描述的矩阵相乘 setTransform() - 将当前变换重置为单位矩阵，然后运行参数描述的变换

Examples explained

Canvas 裁剪

clip() - 创建圆形裁剪区域。然后绘制两个矩形 clip() - 创建三角形裁剪区域。然后绘制两个矩形 clip() - 创建圆形裁剪区域。然后绘制一个图像 clip() - 创建两个矩形作为裁剪区域。使用 evenodd 规则 clip() - 创建两个矩形作为裁剪区域。使用 nonzero 规则

Examples explained

Canvas 合成

globalCompositeOperation = "source-over" globalCompositeOperation = "source-out" globalCompositeOperation = "destination-over" globalCompositeOperation = "destination-atop" globalCompositeOperation = "lighter" globalCompositeOperation = "copy" globalCompositeOperation = "xor" globalCompositeOperation = "multiply" globalCompositeOperation = "screen" globalCompositeOperation = "darken" globalCompositeOperation = "lighten" globalCompositeOperation = "hue" globalCompositeOperation = "luminosity"

Examples explained

❮ 上一篇下一篇 ❯

W3schools 学习路径

跟踪您的进度 - 免费！

Get Certified

拾色器

colorpicker

×

联系销售

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

报告错误

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

热门教程

HTML 教程
CSS 教程
JavaScript 教程
操作方法教程
SQL 教程
Python 教程
W3.CSS 教程
Bootstrap 教程
PHP 教程
Java 教程
C++ 教程
jQuery 教程

热门参考

HTML 参考
CSS 参考
JavaScript 参考
SQL 参考
Python 参考
W3.CSS 参考
Bootstrap 参考
PHP 参考
HTML 颜色
Java 参考
Angular 参考
jQuery 参考

热门示例

HTML 示例
CSS 示例
JavaScript 示例
操作方法示例
SQL 示例
Python 示例
W3.CSS 示例
Bootstrap 示例
PHP 示例
Java 示例
XML 示例
jQuery 示例

获取证书

HTML 证书
CSS 证书
JavaScript 证书
前端证书
SQL 证书
Python 证书
PHP 证书
jQuery 证书
Java 证书
C++ 证书
C# 证书
XML 证书

论坛关于学院

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

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