HTML DOM Canvas 对象\

htmlweb developmentfront end technology更新于 2024/6/11 9:16:17

HTML DOM Canvas 对象与 HTML5 中引入的 <canvas> 元素相关联。<canvas> 标签用于借助 JavaScript 绘制图形。画布充当图形的容器。在画布上，我们可以绘制线条、形状等。

属性

以下是 Canvas 对象的属性 −

属性	描述
fillStyle	设置或返回用于填充图形的颜色、渐变或图案。
strokeStyle	设置或返回用于描边的颜色、渐变或图案。
shadowColor	设置或返回用于阴影的颜色。
shadowBlur	设置或返回阴影。
shadowOffsetX	设置或返回阴影与形状的水平距离。
shadowOffsetY	设置或返回阴影与形状的垂直距离。

方法

以下是 Canvas 对象 − 的方法

方法	描述
createLinearGradient()	创建线性渐变。
createPattern()	通过沿某个方向重复指定元素来创建图案。
shadowColor	设置或返回用于阴影的颜色。
createRadialGradient()	创建圆形渐变。
addColorStop()	设置或返回阴影与形状的水平距离。

语法

以下是语法 −

创建画布对象 −

var x=document.createElement("CANVAS");

示例

让我们看一个 HTML DOM 画布对象的示例 −

<!DOCTYPE html>
<html>
<head>
<style>
   canvas {
      border: 1px double blue;
      margin:1em;
   }
</style>
</head>
<body>
<h1>CANVAS</h1>
<button onclick="createCanvas()">CREATE</button>
<p>Click the above button to create a CANVAS element with a green circle in it</p>
<script>
   function createCanvas() {
      var x = document.createElement("CANVAS");
      var ctx = x.getContext("2d");
      ctx.fillStyle = "#C7EA46";
      ctx.beginPath();
      ctx.arc(100, 75, 50, 0, 2 * Math.PI);
      ctx.fill();
      ctx.stroke();
      document.body.appendChild(x);
   }
</script>
</body>
</html>

输出

这将产生以下输出 −

点击"创建 −"

在上面的例子中 −

我们首先创建了一个"创建"按钮，点击该按钮时将执行 createCanvas() 方法。

<button onclick="createCanvas()>>CREATE</button>

createCanvas() 方法创建一个 <canvas> 元素。然后，我们获取新创建的 <canvas> 的上下文。使用 getContext() 方法获取元素。每个 Canvas 方法只能关联一个上下文。getContext() 方法中的参数值"2d"指定它将用于绘制形状和大小，即仅绘制 2d 对象。然后，我们使用 fillstyle 设置填充颜色，并使用 beginPath() 方法开始路径。

之后，使用 arc() 方法定义圆的坐标，并使用 fillstyle 颜色填充该圆。最后，我们使用 stroke() 方法在 Canvas 上进行实际绘制，并使用 document.body 的 appendChild() 方法将 Canvas 作为 body 元素的子元素附加 −

function createCanvas() {
   var x = document.createElement("CANVAS");
   var ctx = x.getContext("2d");
   ctx.fillStyle = "#C7EA46";
   ctx.beginPath();
   ctx.arc(100, 75, 50, 0, 2 * Math.PI);
   ctx.fill();
   ctx.stroke();
   document.body.appendChild(x);
}