使用Canvas绘制(1)矩形、(2)三角形、(3)扇形、(4)文本、(5)图像、(6)视频。
时间: 2024-05-09 18:16:20 浏览: 8
以下是使用Canvas绘制不同图形和元素的示例代码:
1. 绘制矩形
```
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
```
2. 绘制三角形
```
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
```
3. 绘制扇形
```
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75,75);
ctx.arc(75,75,50,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
```
4. 绘制文本
```
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
```
5. 绘制图像
```
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 10, 10);
};
img.src = "image.png";
```
6. 绘制视频
```
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var video = document.getElementById("myVideo");
function drawVideo() {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
requestAnimationFrame(drawVideo);
}
drawVideo();
```