html中Canvas知识点
时间: 2023-11-24 20:06:56 浏览: 39
Canvas 是 HTML5 新增的一个元素,它可以用来通过 JavaScript 在页面上绘制图形、动画等。以下是 Canvas 的一些知识点:
1. 创建 Canvas 元素
```html
<canvas id="myCanvas"></canvas>
```
2. 获取 Canvas 元素
```javascript
var canvas = document.getElementById("myCanvas");
```
3. 设置 Canvas 元素的宽度和高度
```javascript
canvas.width = 500;
canvas.height = 500;
```
4. 获取 Canvas 的上下文对象
```javascript
var ctx = canvas.getContext("2d");
```
5. 绘制基本图形
```javascript
// 绘制矩形
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 100);
// 绘制圆形
ctx.beginPath();
ctx.arc(50, 50, 30, 0, Math.PI * 2);
ctx.fillStyle = "blue";
ctx.fill();
```
6. 绘制图像
```javascript
var img = new Image();
img.src = "image.png";
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
```
7. 绘制文本
```javascript
ctx.font = "20px Arial";
ctx.fillStyle = "green";
ctx.fillText("Hello, world!", 50, 50);
```
8. 绘制动画
```javascript
function draw() {
// 绘制图形
}
setInterval(draw, 10);
```
以上是一些基本的 Canvas 知识点,当然还有很多高级的用法,比如使用 WebGL 在 Canvas 上渲染 3D 图形等。