HTML5 canvas JavaScript 绘制图形

最新推荐文章于 2024-09-17 14:53:18 发布

allway2

最新推荐文章于 2024-09-17 14:53:18 发布

阅读量788

点赞数

本文链接：https://blog.csdn.net/allway2/article/details/118569423

版权

在本教程中，您将学习如何使用 HTML5 画布元素在网页上绘制图形。

什么是canvas ？

HTML5 canvas 元素可用于通过 JavaScript 在网页上绘制图形。画布最初是由 Apple 为 Mac OS 仪表板小部件引入的，并为 Safari 网络浏览器中的图形提供动力。后来它被火狐、谷歌浏览器和歌剧采用。现在，画布是用于下一代 Web 技术的新 HTML5 规范的一部分。

默认情况下，<canvas>元素有 300 像素的宽度和 150 像素的高度，没有任何边框和内容。但是，可以使用 CSSheight和width属性定义自定义宽度和高度，而可以使用 CSSborder属性应用边框。

了解画布坐标

画布是一个二维矩形区域。画布左上角的坐标是 (0, 0)，也就是原点，右下角的坐标是 ( canvas width , canvas height )。这是画布默认坐标系的简单演示。

提示：将鼠标指针放在上面演示的画布区域内，您将获得其相对于画布的当前坐标。<canvas>所有主要网络浏览器都支持该元素，例如 Chrome、Firefox、Safari、Opera、IE 9 及更高版本。

在画布上绘制路径和形状

在本节中，我们将仔细研究如何使用新引入的 HTML5 canvas 元素和 JavaScript 绘制基本路径和形状。

这是在 2D HTML5 画布上绘制路径和形状的基本模板。

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drawing on Canvas</title>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        // draw stuff here
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

除了从 7 到 11 的那些行之外，所有的行都非常直截了当。附加到window.onload事件的匿名函数将在页面加载时执行。页面加载完成后，我们可以使用document.getElementById()方法访问 canvas 元素。后来我们通过将 2d 传递getContext()给 canvas 对象的方法来定义一个 2D 画布上下文。

画线

您可以在画布上绘制的最基本路径是直线。用于此目的的最重要的方法是moveTo()，lineTo()和stroke()。

该moveTo()方法定义了绘图光标在画布上的位置，而该lineTo()方法用于定义线的终点坐标，最后该stroke()方法用于使该线可见。让我们尝试一个例子：

例子

<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.moveTo(50, 150);
        context.lineTo(250, 50);
        context.stroke();
    };
</script>

画圆弧

您可以使用该arc()方法创建圆弧。该方法的语法如下：

context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);

以下示例中的 JavaScript 代码将在画布上绘制一条弧线。

例子

<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
        context.stroke();
    };
</script>

绘制矩形

您可以使用该rect()方法创建矩形和正方形。该方法需要四个参数x，y矩形的位置及其宽度和高度。

该rect()方法的基本语法可以通过以下方式给出：

context.rect(x, y, width, height);

以下 JavaScript 代码将绘制一个以画布为中心的矩形。

例子

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        context.stroke();
    };
</script>

画圆

没有像矩形的rect()方法那样创建圆形的特定方法。但是，您可以使用该arc()方法创建完全封闭的圆弧，例如圆。

使用该arc()方法绘制完整圆的语法可以通过以下方式给出：

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

以下示例将以画布为中心绘制一个完整的圆。

例子

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        context.stroke();
    };
</script>

在描边上应用样式和颜色

笔画的默认颜色为黑色，粗细为 1 个像素。但是，您可以使用strokeStyle和lineWidth属性分别设置笔触的颜色和宽度。

以下示例将绘制一条宽度为 5 像素的橙色线条。

例子

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 5;
        context.strokeStyle = "orange";
        context.moveTo(50, 150);
        context.lineTo(250, 50);
        context.stroke();
    };
</script>

您还可以使用该lineCap属性设置线条的帽样式。线帽提供三种样式 - 对接、圆形和方形。下面是一个例子：

例子

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.strokeStyle = "orange";
        context.lineCap = "round";
        context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
        context.stroke();
    };
</script>

在画布形状内填充颜色

您还可以使用该fillStyle()方法在画布形状内填充颜色。

以下示例将向您展示如何在矩形内填充纯色。

例子

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        context.fillStyle = "#FB8B89";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    };
</script>

提示：在画布上为形状设置样式时，建议使用fill()方法之前的stroke()方法，以便正确渲染笔画。

同样，您也可以使用该fillStyle()方法在圆内填充纯色。

例子

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        context.fillStyle = "#FB8B89";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    };
</script>

在画布形状内填充渐变颜色

您还可以在画布形状内填充渐变色。渐变只是从一种颜色到另一种颜色的平滑视觉过渡。有两种类型的渐变可用——线性和径向。

创建线性渐变的基本语法可以通过以下方式给出：

var grd = context.createLinearGradient(startX, startY, endX, endY);

下面的示例使用createLinearGradient()方法在矩形内填充线性渐变颜色。让我们尝试一下以了解它的基本工作原理：

例子

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
        grd.addColorStop(0, '#8ED6FF');   
        grd.addColorStop(1, '#004CB3');
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    };
</script>

同样，您可以使用该createRadialGradient()方法使用径向渐变填充画布形状。创建径向渐变的基本语法可以通过以下方式给出：

var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);

下面的示例使用createRadialGradient()方法在圆内填充径向渐变颜色。让我们尝试一下以了解它的实际工作原理：

例子

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100);
        grd.addColorStop(0, '#8ED6FF');   
        grd.addColorStop(1, '#004CB3');
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    };
</script>

在画布上绘制文本

您还可以在画布上绘制文本。这些文本可以包含任何 Unicode 字符。下面的示例将绘制一条简单的问候消息“Hello World！” 到画布上。

例子

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.fillText("Hello World!", 50, 100);
    };
</script>

您还可以设置画布上文本的颜色和对齐方式，如下所示：

例子

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillStyle = "orange";
        context.fillText("Hello World!", 150, 100);
    };
</script>

您还可以使用strokeText()方法在文本上应用笔触。此方法将为文本的周边着色而不是填充它。但是，如果您想在画布文本上设置填充和描边，您可以同时使用fillText()和strokeText()方法。

例子

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.strokeStyle = "orange";
        context.strokeText("Hello World!", 150, 100);
    };
</script>

提示：在画布上设置文本样式时，建议使用fillText()方法之前的strokeText()方法，以便正确渲染笔画。