为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Html5canvas学习：初学者指南

Html5canvas学习：初学者指南

标签：
Html/CSS Html5
概述

本文详细介绍了Html5canvas学习中的基本概念和用法，包括Canvas的基本操作、图形绘制、文本和图像处理以及动画基础。文章还提供了多个示例代码，帮助读者深入理解Canvas的各种功能，并推荐了一些学习资源和进阶方向。

Html5 Canvas简介
什么是Html5 Canvas

Html5 Canvas 是 HTML5 中的一个重要元素，允许开发者在网页上直接绘制图形。Canvas 提供了一个 HTML 指令集，可以用于在网页上绘制线条、形状、图像、动画等效果。通过 JavaScript，开发者可以控制 Canvas 元素，实现复杂的图形和动画效果。Canvas 的核心是一个二维渲染上下文（2D rendering context），提供了绘制图形所需的所有基本工具。Canvas 是一个矩形元素，具有宽度和高度属性，可以通过 JavaScript 动态调整大小。

Html5 Canvas的基本用法

Canvas 主要通过 JavaScript 来操作。首先需要在 HTML 中创建一个 Canvas 元素，然后通过 JavaScript 获取该元素的引用，并使用 getContext 方法获取 Canvas 的渲染上下文。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
    </script>
</body>
</html>

上述代码中，<canvas> 元素的 id 属性用于在 JavaScript 中引用该元素。getContext('2d') 方法返回一个 CanvasRenderingContext2D 对象，该对象是绘制图形的基本工具。

创建一个简单的Canvas元素

以下是一个简单的示例，展示了如何创建一个 Canvas 元素并在其上绘制一个矩形：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 设置填充颜色
        ctx.fillStyle = "#ff0000";
        // 填充矩形
        ctx.fillRect(10, 10, 100, 100);
    </script>
</body>
</html>

上述代码中，设置了填充颜色为红色，并填充了一个 100x100 的矩形，位置从 (10, 10) 开始。

基本图形绘制
绘制线条和形状

线条

绘制线条可以使用 moveTo 和 lineTo 方法，以及 stroke 方法来完成。moveTo(x, y) 方法将绘制上下文移动到指定位置，lineTo(x, y) 方法从当前位置绘制一条线到指定位置。stroke 方法绘制线条。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 设置线条颜色
        ctx.strokeStyle = "#0000ff";
        // 移动到起点
        ctx.moveTo(10, 10);
        // 绘制线条到终点
        ctx.lineTo(100, 100);
        // 绘制线条
        ctx.stroke();
    </script>
</body>
</html>

形状

绘制矩形、圆角矩形、圆形等基本形状，可以使用 fillRect、clearRect、arc、arcTo 等方法。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 绘制矩形
        ctx.fillStyle = "#ff0000";
        ctx.fillRect(10, 10, 100, 100);

        // 绘制圆角矩形
        ctx.beginPath();
        ctx.moveTo(120, 10);
        ctx.lineTo(200, 10);
        ctx.quadraticCurveTo(220, 10, 220, 30);
        ctx.lineTo(220, 100);
        ctx.quadraticCurveTo(220, 120, 200, 120);
        ctx.lineTo(120, 120);
        ctx.quadraticCurveTo(100, 120, 100, 100);
        ctx.lineTo(100, 10);
        ctx.closePath();
        ctx.fillStyle = "#00ff00";
        ctx.fill();

        // 绘制圆形
        ctx.beginPath();
        ctx.arc(100, 150, 30, 0, Math.PI * 2);
        ctx.fillStyle = "#0000ff";
        ctx.fill();
    </script>
</body>
</html>
填充和描边颜色

填充和描边是绘制图形的重要属性。fillStyle 和 strokeStyle 属性可以设置填充和描边的颜色。颜色可以是字符串（如 "red" 或 "#ff0000"）、渐变或图案。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 设置填充和描边颜色
        ctx.fillStyle = "#ff0000";
        ctx.strokeStyle = "#0000ff";

        // 绘制填充矩形
        ctx.fillRect(10, 10, 50, 50);

        // 绘制描边矩形
        ctx.strokeRect(70, 10, 50, 50);
    </script>
</body>
</html>
使用路径绘制复杂形状

通过路径，可以绘制更复杂的形状。beginPath 方法开始一个新的路径，closePath 方法闭合路径，fill 方法填充路径，stroke 方法描边路径。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 开始新路径
        ctx.beginPath();
        // 移动到起点
        ctx.moveTo(50, 100);
        // 绘制线条
        ctx.lineTo(70, 70);
        ctx.lineTo(100, 100);
        ctx.lineTo(70, 130);
        // 闭合路径
        ctx.closePath();
        // 填充路径
        ctx.fillStyle = "#ff0000";
        ctx.fill();
        // 描边路径
        ctx.strokeStyle = "#0000ff";
        ctx.stroke();
    </script>
</body>
</html>
文本和图像处理
在Canvas上绘制文本

绘制文本可以使用 fillText 和 strokeText 方法。fillText 方法填充文本，strokeText 方法描边文本。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 设置填充和描边颜色
        ctx.fillStyle = "#000000";
        ctx.strokeStyle = "#0000ff";

        // 绘制填充文本
        ctx.fillText("Hello, World!", 10, 50);

        // 绘制描边文本
        ctx.strokeText("Hello, World!", 10, 80);
    </script>
</body>
</html>
加载和显示图像

加载和显示图像可以使用 drawImage 方法。这个方法可以将图像绘制到 Canvas 上。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 创建一个图像对象
        var img = new Image();
        img.src = 'example.jpg';

        // 图像加载完成后的回调函数
        img.onload = function() {
            // 绘制图像
            ctx.drawImage(img, 0, 0, img.width, img.height);
        };
    </script>
</body>
</html>
对图像进行基本变换

可以使用 translate、rotate、scale 等方法对图像进行变换。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 创建一个图像对象
        var img = new Image();
        img.src = 'example.jpg';

        // 图像加载完成后的回调函数
        img.onload = function() {
            // 平移 50 个单位
            ctx.translate(50, 50);
            // 旋转 45 度
            ctx.rotate(Math.PI / 4);
            // 缩放 0.5 倍
            ctx.scale(0.5, 0.5);
            // 绘制图像
            ctx.drawImage(img, 0, 0, img.width, img.height);
        };
    </script>
</body>
</html>
动画基础
使用setTimeout和setInterval

setTimeout 和 setInterval 是 JavaScript 中实现动画的基本方法。setTimeout 可以在指定时间后执行一次函数，而 setInterval 可以每隔一段时间执行一次函数。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 动画示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 清除 Canvas
        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        // 动画函数
        function animate() {
            // 移动矩形
            ctx.fillStyle = "#ff0000";
            ctx.fillRect(10, 10, 50, 50);
            // 每次移动 10 个单位
            ctx.translate(10, 0);
            // 重绘
            setTimeout(animate, 1000/60);
        }

        // 开始动画
        animate();
    </script>
</body>
</html>
实现简单的帧动画

帧动画是动画的基本形式，通过不断重绘 Canvas 来模拟动画效果。每帧绘制后，清除上一帧的内容，这样就可以看到连续的动画效果。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 动画示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 清除 Canvas
        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        // 动画函数
        function animate() {
            // 移动矩形
            ctx.fillStyle = "#ff0000";
            ctx.fillRect(10, 10, 50, 50);
            // 每次移动 10 个单位
            ctx.translate(10, 0);
            // 重绘
            clearCanvas();
            setTimeout(animate, 1000/60);
        }

        // 开始动画
        animate();
    </script>
</body>
</html>
Canvas中的事件处理

在 Canvas 中处理事件时，可以监听 mousemove、mousedown、mouseup 等事件。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 事件示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 处理鼠标移动事件
        canvas.addEventListener('mousemove', function(event) {
            // 获取鼠标位置
            var rect = canvas.getBoundingClientRect();
            var x = event.clientX - rect.left;
            var y = event.clientY - rect.top;

            // 绘制鼠标位置
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = "#ff0000";
            ctx.fillRect(x - 5, y - 5, 10, 10);
        });
    </script>
</body>
</html>
实例：制作一个简单的网页游戏
设计游戏的基本规则

一个简单的网页游戏可以设计为：玩家控制一个小球在 Canvas 上移动，目标是避开障碍物。玩家可以通过键盘控制小球的移动。

使用Canvas实现游戏界面

游戏界面可以使用 Canvas 绘制小球和障碍物。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 游戏示例</title>
</head>
<body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 小球位置
        var ballX = 100;
        var ballY = 100;
        var ballRadius = 10;

        // 绘制小球
        function drawBall() {
            ctx.beginPath();
            ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "#ff0000";
            ctx.fill();
            ctx.closePath();
        }

        // 清除 Canvas
        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        // 动画函数
        function animate() {
            clearCanvas();
            drawBall();
            requestAnimationFrame(animate);
        }

        // 开始动画
        animate();
    </script>
</body>
</html>
添加玩家控制和互动元素

玩家可以通过键盘控制小球的移动。可以通过监听 keydown 和 keyup 事件来实现。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 游戏示例</title>
</head>
<body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 小球位置
        var ballX = 100;
        var ballY = 100;
        var ballRadius = 10;

        // 移动距离
        var moveDistance = 10;

        // 绘制小球
        function drawBall() {
            ctx.beginPath();
            ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "#ff0000";
            ctx.fill();
            ctx.closePath();
        }

        // 清除 Canvas
        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        // 处理按键事件
        var isMovingUp = false;
        var isMovingDown = false;
        var isMovingLeft = false;
        var isMovingRight = false;

        document.addEventListener('keydown', function(event) {
            switch(event.keyCode) {
                case 38: // 上箭头
                    isMovingUp = true;
                    break;
                case 40: // 下箭头
                    isMovingDown = true;
                    break;
                case 37: // 左箭头
                    isMovingLeft = true;
                    break;
                case 39: // 右箭头
                    isMovingRight = true;
                    break;
            }
        });

        document.addEventListener('keyup', function(event) {
            switch(event.keyCode) {
                case 38: // 上箭头
                    isMovingUp = false;
                    break;
                case 40: // 下箭头
                    isMovingDown = false;
                    break;
                case 37: // 左箭头
                    isMovingLeft = false;
                    break;
                case 39: // 右箭头
                    isMovingRight = false;
                    break;
            }
        });

        // 动画函数
        function animate() {
            clearCanvas();
            drawBall();

            if (isMovingUp) ballY -= moveDistance;
            if (isMovingDown) ballY += moveDistance;
            if (isMovingLeft) ballX -= moveDistance;
            if (isMovingRight) ballX += moveDistance;

            // 限制小球在 Canvas 内部
            if (ballX + ballRadius > canvas.width) ballX = canvas.width - ballRadius;
            if (ballX - ballRadius < 0) ballX = ballRadius;
            if (ballY + ballRadius > canvas.height) ballY = canvas.height - ballRadius;
            if (ballY - ballRadius < 0) ballY = ballRadius;

            requestAnimationFrame(animate);
        }

        // 开始动画
        animate();
    </script>
</body>
</html>
总结与进阶资源
Html5 Canvas学习资源推荐
  • 慕课网 提供了大量的 Html5 Canvas 教程，适合不同水平的学习者。
  • MDN Web Docs 是 Canvas 的官方文档，提供了详细的 API 和示例。
  • Canvas API 文档 提供了 Canvas API 的详细说明。
常见问题解答

  • 如何清除 Canvas？

    • 使用 clearRect(x, y, width, height) 方法清除指定区域的内容，或者使用 clearRect(0, 0, canvas.width, canvas.height) 清除整个 Canvas。
  • 如何绘制渐变填充？
    • 使用 createLinearGradient(x0, y0, x1, y1) 创建线性渐变，使用 createRadialGradient(x0, y0, r0, x1, y1, r1) 创建径向渐变。然后使用 addColorStop(position, color) 方法设置渐变颜色，最后将渐变对象设置为 fillStyle 或 strokeStyle。
如何继续深入学习Canvas
  • 学习动画和交互：深入学习 requestAnimationFrame 和事件处理，实现更复杂的动画效果和用户交互。
  • 学习渲染优化：了解如何优化 Canvas 渲染性能，减少不必要的重绘和计算。
  • 学习 WebGL：如果需要更高级的图形渲染，可以学习 WebGL，它是 Canvas 的三维扩展。
点击查看更多内容
发表于 2024.10.17 10:54， 共 71 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

qq_遁去的一_1

手记
篇
粉丝
7
获赞与收藏
23

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消