Canvas 图形-01：Canvas介绍、Canvas API

Canvas介绍、Canvas API

Canvas介绍

Canavs是HTML5规范的一部分，需要使用 <canvas></canvas>在HTML中标注使用。实际操作的是canvas的context。
Context2D是基于状态的，拥有一个状态机，当绘制时读取状态（路径、样式等），绘制图形，因此本质上是对状态进行操作（改变状态）。

第一个canvas，Hello World

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>直线</title>
    <script>
      window.onload = function () {
        const cnv = document.getElementById("app");
        const ctx = cnv.getContext("2d");
        ctx.fillText("Hello World", 100, 75);
      };
    </script>
  </head>

  <body>
    <canvas id="app" width="200" height="150"></canvas>
  </body>
</html>
  1. 获取canvas DOM元素
  2. 使用getContext("2d")获取绘图上下文
  3. 调用Context2D API绘制图形

Canvas API

画图

API 用途
lineTo 画直线
rect、fillRect、strokeRect 画矩形
arc 画圆形
arcTo 路径上画圆弧
ellipse 画椭圆
fillText 填充文字
strokeText 描边文字
bezierCurveTo 贝塞尔曲线
quadraticCurveTo 三次贝塞尔曲线
drawImage 绘制图像

功能

API 用途
save 存储状态
restore 恢复状态
clip 裁剪路径
beginPath 开始路径
closePath 闭合路径

属性

属性 用途

样式风格

对于fillStyle和strokeStyle（填充样式和描边样式），可以设置为颜色、图案（Pattern）、渐变

  1. 线性渐变
    createLinearGradient
  2. 径向渐变
    createRadialGradient
  3. 图案
    createPattern

全局配置

globalAplha：设置全局透明度
globalCompositeOperation：设置全局混合模式

posted @ 2023-01-15 14:03  不入凡尘  阅读(78)  评论(0)    收藏  举报