HTML5 第六章使用图形

梦落繁辞

已于 2023-10-20 20:23:12 修改

阅读量107

点赞数 1

分类专栏：前端学习文章标签：前端 javascript html

于 2023-10-20 20:20:02 首次发布

本文链接：https://blog.csdn.net/mlfc0422/article/details/133938475

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

画布简介

创建画布

1.创建HTML结构：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Example</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

在上面的示例中，我们创建了一个<canvas>元素，它有一个ID为"myCanvas"，并且指定了宽度和高度。

2.获取Canvas元素引用：

要在JavaScript中绘制图形，首先需要获取<canvas>元素的引用。这可以通过使用document.getElementById方法来完成：

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

3.获取2D上下文：

要在画布上绘制图形，需要获取2D上下文。通过getContext方法，可以获取2D上下文：

使用颜色、形状和样式

1.使用形状

1.rect 方法在 Canvas API 中用于创建一个路径，该路径表示一个矩形。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Rectangle Example</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");
        
        // 创建一个矩形路径
        ctx.rect(50, 50, 100, 100); // 参数：(x, y, width, height)
    </script>
</body>
</html>

2.绘制填充矩形（fillRect）：

使用fillRect方法可以在画布上绘制填充矩形。这个矩形将被填充为指定的颜色。

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

// 绘制一个填充矩形（红色）
ctx.fillStyle = "red"; // 设置填充颜色为红色
ctx.fillRect(50, 50, 100, 100); // 从坐标(50, 50)开始，宽度和高度都为100

3.绘制轮廓矩形（strokeRect）：

使用strokeRect方法可以在画布上绘制矩形的轮廓线。

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

// 绘制一个轮廓矩形（蓝色边框）
ctx.strokeStyle = "blue"; // 设置边框颜色为蓝色
ctx.lineWidth = 2; // 设置边框线宽度为2像素
ctx.strokeRect(200, 50, 100, 100); // 从坐标(200, 50)开始，宽度和高度都为100

4.清除内容

clearRect 方法用于在HTML5画布上清除指定区域的内容，使其变为透明。这是一个常用于创建动画、擦除画布特定部分以及制作互动性应用程序的重要方法。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas clearRect Example</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");
        
        // 绘制一个矩形（红色填充）
        ctx.fillStyle = "red";
        ctx.fillRect(50, 50, 100, 100);
        
        // 清除矩形区域
        setTimeout(() => {
            ctx.clearRect(75, 75, 50, 50);
        }, 2000); // 2秒后清除部分区域
    </script>
</body>
</html>

在上面的示例中，我们首先使用 fillRect 方法绘制了一个红色填充的矩形。然后，使用 clearRect 方法在画布上清除了一个区域，该区域从坐标 (75, 75) 开始，宽度和高度都为 50 像素。这将在 2 秒后发生，演示了清除部分区域的效果。清除的区域变为透明，因此画布上的内容可以透过它看到。

2.使用颜色

1.fillStyle 是 HTML5 Canvas API 中的属性，用于设置绘制填充的颜色或样式。你可以使用 fillStyle 来定义绘制形状的填充颜色、渐变、图案或其他填充样式。

context.fillStyle = style;

style 可以是表示颜色、渐变对象或图案对象的值。通常，它可以是一个字符串表示的颜色值，如 "red"、"#FF0000"（红色的十六进制表示）、"rgb(255, 0, 0)"（红色的RGB表示）。

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

// 设置填充颜色为红色
ctx.fillStyle = "red";

// 绘制一个填充矩形
ctx.fillRect(50, 50, 100, 100);

在上面的示例中，我们首先获取了画布的上下文对象 ctx，然后使用 ctx.fillStyle 属性将填充颜色设置为红色。接下来，我们使用 ctx.fillRect 绘制了一个填充矩形，该矩形的填充颜色是通过 fillStyle 设置的。

2.strokeStyle 是 HTML5 Canvas API 中的属性，用于设置绘制轮廓的颜色或样式。你可以使用 strokeStyle 来定义绘制形状的轮廓颜色、渐变、图案或其他轮廓样式。

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

// 设置轮廓颜色为蓝色
ctx.strokeStyle = "blue";

// 绘制一个轮廓矩形
ctx.strokeRect(50, 50, 100, 100);

在上面的示例中，我们首先获取了画布的上下文对象 ctx，然后使用 ctx.strokeStyle 属性将轮廓颜色设置为蓝色。接下来，我们使用 ctx.strokeRect 绘制了一个轮廓矩形，该矩形的轮廓颜色是通过 strokeStyle 设置的。

3.在 HTML5 Canvas 中，shadowColor 是用于设置阴影的颜色属性。当你绘制形状并启用阴影后，shadowColor 用于定义阴影的颜色。这使你可以为绘制的对象创建阴影效果，增强视觉深度和逼真性。

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

// 启用阴影
ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; // 使用半透明黑色作为阴影颜色
ctx.shadowBlur = 5; // 设置阴影模糊程度
ctx.shadowOffsetX = 5; // 阴影水平偏移
ctx.shadowOffsetY = 5; // 阴影垂直偏移

// 绘制一个有阴影的矩形
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 100);

在上面的示例中，我们首先获取了画布的上下文对象 ctx，然后启用了阴影效果。ctx.shadowColor 属性被设置为半透明的黑色，表示阴影的颜色。ctx.shadowBlur 属性定义了阴影的模糊程度，而 ctx.shadowOffsetX 和 ctx.shadowOffsetY 属性定义了阴影的水平和垂直偏移。

接下来，我们绘制了一个蓝色的矩形，并由于启用了阴影，矩形会在其周围产生黑色半透明阴影。

3.使用样式

1.addColorStop 是用于创建渐变的 Canvas API 方法之一。它通常与 createLinearGradient 和 createRadialGradient 方法一起使用，以定义渐变的颜色和位置。addColorStop 方法用于指定渐变对象中的颜色和停止位置，从而实现平滑的颜色过渡。

gradient.addColorStop(position, color);

position 是一个介于 0 和 1 之间的值，表示渐变的位置。0 表示渐变的开始，1 表示渐变的结束。

color 是一个字符串，表示在指定位置处的颜色值，通常采用颜色名称（如 "red"）、十六进制颜色值（如 "#FF0000"）或 RGB 表示（如 "rgb(255, 0, 0)"）。

2.createLinearGradient 是 HTML5 Canvas API 中用于创建线性渐变对象的方法。线性渐变是一种颜色渐变，颜色沿着一条直线过渡，从一个点到另一个点。你可以在画布上使用线性渐变来填充形状或绘制线条。

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

// 创建线性渐变对象
const gradient = ctx.createLinearGradient(50, 50, 200, 50); // 从 (50, 50) 到 (200, 50)

// 添加颜色停止
gradient.addColorStop(0, "red"); // 渐变起始点颜色为红色
gradient.addColorStop(0.5, "green"); // 渐变中间点颜色为绿色
gradient.addColorStop(1, "blue"); // 渐变结束点颜色为蓝色

// 使用渐变填充矩形
ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 150, 100);

在上面的示例中，我们首先使用 createLinearGradient 创建了一个线性渐变对象 gradient，它从坐标 (50, 50) 到 (200, 50)，表示水平渐变。然后，我们使用 addColorStop 方法为渐变对象定义了三个颜色停止点。这些停止点将创建一个平滑的颜色过渡。

最后，我们使用渐变 ctx.fillStyle = gradient; 来填充一个矩形，使矩形的填充颜色根据渐变进行变化。这将在矩形内部呈现一个从红色到绿色到蓝色的渐变。

3.createRadialGradient 是 HTML5 Canvas API 中用于创建径向渐变对象的方法。径向渐变是一种颜色渐变，其中颜色从一个圆心向另一个圆心过渡。

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

// 创建径向渐变对象
const gradient = ctx.createRadialGradient(100, 100, 20, 100, 100, 100);
// 从 (100, 100) 半径为 20 开始，到 (100, 100) 半径为 100 结束

// 添加颜色停止
gradient.addColorStop(0, "red"); // 渐变内圆颜色为红色
gradient.addColorStop(1, "blue"); // 渐变外圆颜色为蓝色

// 使用渐变填充圆形
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(100, 100, 100, 0, Math.PI * 2);
ctx.fill();

在上面的示例中，我们首先使用 createRadialGradient 创建了一个径向渐变对象 gradient，它从坐标 (100, 100) 内圆半径为 20，到 (100, 100) 外圆半径为 100。然后，我们使用 addColorStop 方法为渐变对象定义了两个颜色停止点。这些停止点将创建一个从红色到蓝色的径向渐变。

最后，我们使用渐变 ctx.fillStyle = gradient; 来填充一个圆形，使圆形的填充颜色根据径向渐变进行变化。这将在圆形内部呈现一个从红色到蓝色的径向渐变。

4.createPattern 是 HTML5 Canvas API 中用于创建填充图案的方法。

const pattern = context.createPattern(image, repetition);

image 是一个 <canvas> 元素、<img> 元素或另一个 <canvas> 渲染上下文。

repetition 是一个字符串，用于指定图案的重复方式，通常为 "repeat"、"repeat-x"、"repeat-y" 或 "no-repeat"。

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

// 创建一个填充图案
const img = new Image();
img.src = "pattern-image.png"; // 你需要提供一个图案图片的路径

img.onload = function() {
    const pattern = ctx.createPattern(img, "repeat");

    // 使用图案填充矩形
    ctx.fillStyle = pattern;
    ctx.fillRect(50, 50, 200, 100);
};

在这个示例中，我们首先获取了画布的上下文对象 ctx，然后创建一个图案对象 pattern，并将其设置为 createPattern 方法的结果。这个图案使用了一个图像 img，该图像被加载后，我们指定它将被重复填充。

在这里，"repeat" 参数表示图案将在水平和垂直方向重复填充，从而填充整个形状。

最后，我们将图案 ctx.fillStyle = pattern; 设置为矩形的填充样式，以使用图案来填充矩形。

处理路径、文本和图像

1.处理路径

在HTML5画布上使用路径（path）是创建复杂形状和图形的基本概念。路径允许你绘制线条、曲线和其他形状。你通过定义一系列点，并应用各种路径绘制方法来构建路径，从而创建所需的形状。

1.开始路径 (beginPath):

在开始绘制新形状之前，你应该使用 beginPath 方法开始一个新的路径。这将清除任何先前的路径数据，并将当前路径设置为一个空路径。

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath(); // 开始新路径

2.移动到一个点 (moveTo):

使用 moveTo 方法来设置路径的起始点。它不会绘制任何东西，只是将 "画笔" 移动到指定点。

ctx.moveTo(50, 50); // 将画笔移动到 (50, 50)

3.绘制线条 (lineTo):

要绘制直线，使用 lineTo 方法。它将当前点连接到指定点，并绘制一条直线。

ctx.lineTo(150, 50); // 画一条线到 (150, 50)

4.绘制曲线（例如 arc, quadraticCurveTo, bezierCurveTo）:

要绘制曲线，你可以使用不同的方法：

arc 方法用于绘制弧线和圆。quadraticCurveTo 用于绘制二次贝塞尔曲线。bezierCurveTo 用于绘制三次贝塞尔曲线。

ctx.arc(100, 100, 50, 0, Math.PI * 2); // 画一个以 (100, 100) 为中心，半径为 50 的完整圆

5.闭合路径 (closePath):

要关闭路径，可以使用 closePath 方法。它将路径的最后一个点连接到第一个点，创建一个封闭的形状。

ctx.closePath(); // 关闭路径

6.填充和描边路径 (fill 和 stroke):

在定义路径后，你可以使用 fill 方法填充路径的内部颜色，使用 stroke 方法轮廓路径。你还可以使用 fillStyle 和 strokeStyle 设置填充和描边的样式

ctx.fillStyle = "red";
ctx.fill(); // 用红色填充路径的内部

ctx.strokeStyle = "blue";
ctx.lineWidth = 2;
ctx.stroke(); // 用蓝色描绘路径的轮廓

2.处理文本

在 HTML5 Canvas 中处理文本是一项常见任务，它允许你在画布上绘制文本信息。你可以设置文本的字体、大小、颜色等属性，然后使用 fillText() 或 strokeText() 方法来在画布上渲染文本。

1.设置字体和样式 (font, textAlign, textBaseline):

在渲染文本之前，你可以通过设置字体、文本对齐方式和文本基线来定义文本的样式。

font 属性定义文本的字体、大小和样式。例如：ctx.font = "20px Arial";textAlign 属性定义文本的水平对齐方式，可以是 "left"、"center" 或 "right"。textBaseline 属性定义文本的垂直对齐方式，可以是 "top"、"middle"、"bottom" 或 "alphabetic"。

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

ctx.font = "20px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

2.绘制文本 (fillText 和 strokeText):

fillText(text, x, y) 方法用于填充文本，即在指定位置上绘制文本。

strokeText(text, x, y) 方法用于描边文本，即绘制文本的轮廓。

const text = "Hello, Canvas!";
const x = canvas.width / 2; // 居中
const y = canvas.height / 2; // 居中

ctx.fillStyle = "blue";
ctx.fillText(text, x, y);

ctx.strokeStyle = "red";
ctx.lineWidth = 2;
ctx.strokeText(text, x, y);

3.处理图像

在 HTML5 Canvas 中处理图像是一项常见任务，它允许你在画布上绘制图像，处理图像大小、位置、剪切以及应用滤镜和效果。

1.绘制与缩放

你可以使用 drawImage 方法将图像绘制到画布上。这个方法可以接受不同的参数来指定图像的位置、大小和其他属性。

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

ctx.drawImage(img, x, y); // 将图像绘制到 (x, y) 的位置

你可以通过指定 x 和 y 来设置图像的位置，也可以通过添加宽度和高度来调整图像的大小。

2.剪切图像

你还可以使用 drawImage 方法来剪切图像的一部分，并将其绘制到画布上。通过指定源图像的剪切区域和目标画布上的位置，你可以实现图像剪裁效果。

const sourceX = 50; // 剪切区域的左上角 X 坐标
const sourceY = 50; // 剪切区域的左上角 Y 坐标
const sourceWidth = 100; // 剪切区域的宽度
const sourceHeight = 100; // 剪切区域的高度
const destX = 200; // 在画布上的 X 坐标
const destY = 200; // 在画布上的 Y 坐标
const destWidth = 50; // 在画布上的宽度
const destHeight = 50; // 在画布上的高度

ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

变换画布元素并为其设置动画效果

变换画布元素

1.translate

方法：context.translate(x, y)

作用：该方法将绘图上下文的原点（坐标原点）移动到指定的坐标 (x, y)。这将影响所有后续绘制操作，使它们以新的坐标原点为参考点。

// 创建画布和上下文
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// 平移坐标原点到(100, 100)
context.translate(100, 100);

// 绘制一个矩形
context.fillRect(0, 0, 50, 50);

2.scale

方法：context.scale(scaleX, scaleY)

作用：该方法用于缩放绘图上下文中的所有绘制操作。scaleX 和 scaleY 参数分别表示在x轴和y轴上的缩放比例。

// 创建画布和上下文
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// 在x轴和y轴上分别缩放2倍
context.scale(2, 2);

// 绘制一个矩形
context.fillRect(20, 20, 50, 50);

3.rotate

方法：context.rotate(angle)

作用：该方法用于旋转绘图上下文中的所有绘制操作，使它们绕原点按指定的角度旋转。角度以弧度为单位。

// 创建画布和上下文
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// 旋转坐标系统45度
context.rotate(Math.PI / 4); // 45度转弧度

// 绘制一个矩形
context.fillRect(50, 50, 50, 50);

为画布元素添加动画效果

这段代码是一个包含了小球动画和分数显示的HTML5 Canvas示例。以下是代码的详细解释：

1. HTML 结构：
- `<canvas>` 元素：这是用于绘制小球和动画的画布元素。设置了宽度和高度。
- `<p>` 元素：用于显示分数。
- `<span>` 元素：包含实际分数。

2. JavaScript 部分：

- 获取 `<canvas>` 元素和 2D 渲染上下文：通过 `document.getElementById` 获取 `<canvas>` 元素，并使用 `getContext('2d')` 获取 2D 渲染上下文，用于在画布上绘制。

- 定义小球初始位置和速度：`x` 和 `y` 定义小球的初始位置，`dx` 和 `dy` 定义小球在 x 和 y 方向上的速度。

- `radius`：定义小球的半径。

- `score`：用于追踪分数，初始值为 0。

- `drawBall()` 函数：这个函数用于绘制小球。它首先使用 `clearRect` 清除整个画布，然后绘制一个蓝色的小球。

- `updateBallPosition()` 函数：这个函数用于更新小球的位置。它增加 `x` 和 `y` 的值，根据 `dx` 和 `dy` 的速度，然后检查小球是否碰到了画布的边缘。如果小球碰到了边缘，它将反弹，速度反向，并且分数增加10分。

- `animate()` 函数：这个函数用 `requestAnimationFrame` 来创建动画循环。它调用 `drawBall()` 和 `updateBallPosition()` 来更新小球的位置并绘制它。然后，它使用递归调用 `requestAnimationFrame(animate)` 来不断更新画布，从而创建动画效果。

- `animate()` 函数被调用以启动动画。

3. 分数显示：分数显示在页面中的 `<span>` 元素中，每当分数发生变化时，使用 `document.getElementById('score').textContent` 来更新分数的显示。

这个示例演示了如何在Canvas上创建一个小球动画，并随着小球与画布边缘的碰撞增加分数。分数会实时更新并显示在页面上。您可以根据需要进一步修改和扩展此示例，以创建更复杂的Canvas动画和游戏。

<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<p>Score: <span id="score">0</span></p>
<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var dx = 2;
    var dy = -1;
    var radius = 10;
    var score = 0; // 初始分数

    function drawBall() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.arc(x, y, radius, 0, Math.PI * 2);
        context.fillStyle = 'blue';
        context.fill();
        context.closePath();
    }

    function updateBallPosition() {
        x += dx;
        y += dy;

        if (x + radius > canvas.width || x - radius < 0) {
            dx = -dx;
            score += 1; // 增加分数
            document.getElementById('score').textContent = score; // 更新分数显示
        }
        if (y + radius > canvas.height || y - radius < 0) {
            dy = -dy;
            score += 1; // 增加分数
            document.getElementById('score').textContent = score; // 更新分数显示
        }
    }

    function animate() {
        drawBall();
        updateBallPosition();
        requestAnimationFrame(animate);
    }
    animate();
</script>
</body>
</html>

梦落繁辞

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
HTML5 第六章使用图形

html>在上面的示例中，我们创建了一个元素，它有一个ID为"myCanvas"，并且指定了宽度和高度。2.获取Canvas元素引用：要在JavaScript中绘制图形，首先需要获取元素的引用。这可以通过使用3.获取2D上下文：要在画布上绘制图形，需要获取2D上下文。通过getContext。
复制链接

扫一扫