2.1 HTML5 – Canvas标签

文章目录

• 引言
• Canvas 标签概述
• • 定义
  • 实例：创建画布
• 理解 Canvas 坐标系
• • 概述
  • 实例：获取 Canvas 坐标
• 获取 Canvas 环境上下文
• • 概述
  • 实例：获取 Canvas 上下文
  • 设置渐变色效果
• 结语

引言

大家好，今天我们要一起探索 HTML5 中一个非常有趣且强大的特性——Canvas。我们将通过几个实例来了解如何使用 Canvas 标签，获取其上下文，绘制基本图形，以及实现渐变效果。让我们开始吧！

Canvas 标签概述

定义

标签是 HTML5 中用于绘制图形的元素。它提供了一个空白画布，通过 JavaScript 进行绘制。该标签本身不绘制任何图形，而是作为图形的容器。

实例：创建画布

我们来看一个简单的例子，创建一个 200×150 像素的画布，并给它一个紫色的边框。

canvas id="myCanvas" width="200" height="150" style="border: 1px solid #ff00ff;">
    您的浏览器不支持 HTML5 canvas 标签~
canvas>

理解 Canvas 坐标系

概述

Canvas 元素使用一个二维坐标系统来确定画布上的绘制位置。原点（0,0）位于画布的左上角，水平向右为 x 轴正方向，垂直向下为 y 轴正方向。

实例：获取 Canvas 坐标

我们可以使用 JavaScript 来捕获鼠标在 Canvas 上的坐标，并在页面上显示它们。

div id="box" style="width: 200px; height: 200px; border: 1px solid #ff0000"
     onmousemove="getCoordinates(event)" onmouseout="clearCoordinates()">
div>
div id="xy_coordinates">div>

script>
    function getCoordinates(e) {
        var x = e.clientX;
        var y = e.clientY;
        document.getElementById("xy_coordinates").innerHTML = "Coordinates: (" + x + "," + y + ")";
    }
    
    function clearCoordinates() {
        document.getElementById("xy_coordinates").innerHTML = "";
    }            
script>

获取 Canvas 环境上下文

概述

Canvas 环境上下文，通常指的是 Canvas 2D 渲染上下文，是 HTML5 Canvas 中用于绘制图形、文本、图像和其他对象的主要接口。

实例：获取 Canvas 上下文

让我们获取 Canvas 的 2D 上下文，并绘制一个简单的黄色矩形。

canvas id="myCanvas" width="200" height="150" style="border: 1px solid #ff00ff;">
    您的浏览器不支持 HTML5 canvas 标签~
canvas>

script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#ffff00";
    ctx.fillRect(10, 10, 180, 130);
script>

设置渐变色效果

我们可以创建一个线性渐变，从蓝色到黄色，并填充一个矩形。

script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var gradient = ctx.createLinearGradient(0, 0, c.width, c.height);
    gradient.addColorStop(0, 'blue');
    gradient.addColorStop(1, 'yellow');
    ctx.fillStyle = gradient;
    ctx.fillRect(10, 10, 180, 130);
script>

结语

通过今天的实战，我们学习了如何使用 HTML5 Canvas 来绘制基本图形，理解其坐标系，并获取上下文以绘制更复杂的图形。Canvas 是一个强大的工具，可以用来创建各种动态和交互式的图形和动画。