HTML DOM Canvas 对象
HTML DOM Canvas 对象
HTML DOM Canvas 对象是 HTML5 中最强大、最重要的组成部分之一，主要用于绘制2D和3D图形。Canvas 是一个容器元素，用JavaScript和Canvas API绘制各种对象，例如文本、线条、矩形、圆形、图像等等。Canvas API为客户端提供了非常丰富的画布绘图功能，可以使用属性来控制画布大小、颜色、粗细等参数，以及许多方法来绘制你想要的图形。
基础语法
下面是一些最基本的 2D 绘图方法：
- createElement()
var canvas = document.createElement('canvas');
- getContext()
var ctx = canvas.getContext('2d');
- fillRect()
ctx.fillRect(x, y, width, height);
例如，以下是一个绘制红色矩形的简单代码：
<html>
<head>
<title>Canvas红色矩形</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(0, 0, 100, 100);
</script>
</body>
</html>
属性和方法
接下来，让我们看一下一些 Canvas API 的主要属性和方法：
- width 和 height
Canvas 元素的 width 和 height 属性定义了画布的大小。这两个属性也可以用 JavaScript 来修改。
canvas.width = 200;
canvas.height = 200;
- fillStyle 和 strokeStyle
fillStyle 属性定义了填充颜色，strokeStyle 属性定义了线条颜色。
ctx.fillStyle = 'red';
ctx.strokeStyle = 'blue';
- lineWidth
lineWidth 属性定义了线条的宽度。
ctx.lineWidth = 5;
- clearRect()
clearRect() 方法用于清除画布上的内容。
ctx.clearRect(0, 0, canvas.width, canvas.height);
- beginPath() 和 closePath()
beginPath() 方法开始一条新路径，closePath() 方法结束当前路径。
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.closePath();
- moveTo() 和 lineTo()
moveTo() 方法把路径移动到画布中的某个点，lineTo() 方法在路径上添加一个新点，创造线条效果。
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();
- arc() 和 arcTo()
arc() 方法在画布上创建弧/曲线，arcTo() 方法创建两条切线之间的弧线。
ctx.arc(x, y, r, startAngle, endAngle, anticlockwise);
- fill() 和 stroke()
fill() 方法填充当前形状，stroke() 方法描边当前形状。
ctx.fill();
ctx.stroke();
总结
Canvas 是用于绘制2D图形和图像的一个 HTML 元素。其 API 为绘制和操控图形提供了许多功能和方法。Canvas API 使用简单，并且可以通过 JavaScript 对其进行控制和操纵。Canvas 元素的属性和方法可帮助您创建各种可视化效果，包括图表、动画和交互式图形界面。让我们开始使用这个强大的工具，创造令人惊喜的图形和动态网页吧！