2.1 HTML5 - Canvas标签
引言
大家好，今天我们要一起探索HTML5中一个非常有趣且强大的特性——Canvas。我们将通过几个实例来了解如何使用Canvas标签，获取其上下文，绘制基本图形，以及实现渐变效果。让我们开始吧！
Canvas标签概述
定义
<canvas>标签是HTML5中用于绘制图形的元素。它提供了一个空白画布，通过JavaScript进行绘制。该标签本身不绘制任何图形，而是作为图形的容器。
实例：创建画布
我们来看一个简单的例子，创建一个200x150像素的画布，并给它一个紫色的边框。
<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是一个强大的工具，可以用来创建各种动态和交互式的图形和动画。
原文地址：https://blog.csdn.net/howard2005/article/details/142889635
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！