数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究HTML DOM Canvas 对象
HTML DOM Canvas 对象与 HTML5 中引入的 <canvas> 元素相关联。<canvas> 标签用于借助 JavaScript 绘制图形。canvas 充当图形的容器。在 canvas 上，我们可以绘制线条、形状等。
属性
以下是 Canvas 对象的属性：
| 属性 | 描述 |
|---|---|
| fillStyle | 设置或返回用于填充绘图的颜色、渐变或图案。 |
| strokeStyle | 设置或返回用于描边的颜色、渐变或图案。 |
| shadowColor | 设置或返回用于阴影的颜色。 |
| shadowBlur | 设置或返回阴影的模糊级别。 |
| shadowOffsetX | 设置或返回阴影相对于形状的水平距离。 |
| shadowOffsetY | 设置或返回阴影相对于形状的垂直距离。 |
方法
以下是 Canvas 对象的方法：
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 创建线性渐变。 |
| createPattern() | 通过在指定方向上重复指定元素来创建图案。 |
| shadowColor | 设置或返回用于阴影的颜色。 |
| createRadialGradient() | 创建圆形渐变。 |
| addColorStop() | 设置或返回阴影相对于形状的水平距离。 |
语法
以下是以下内容的语法：
创建 canvas 对象
var x=document.createElement("CANVAS");示例
让我们来看一个 HTML DOM canvas 对象的示例：
<!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> 元素。然后，我们使用 getContext() 方法获取新创建的 <canvas> 元素的上下文。每个 canvas 方法只能与一个上下文相关联。getContext() 方法中的参数值“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);
}
更新于： 2021年2月20日
279 次查看
广告