http+JavaScript写一个漏斗实例
时间: 2024-01-12 16:02:54 浏览: 21
可以的,以下是一个简单的使用 JavaScript 实现的漏斗实例,代码如下:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>Funnel Example</title>
</head>
<body>
<h1>Funnel Example</h1>
<canvas id="canvas"></canvas>
</body>
</html>
```
JavaScript:
```javascript
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var width = 600
var height = 400
canvas.width = width
canvas.height = height
var Funnel = function(x, y, width, height, color){
this.x = x
this.y = y
this.width = width
this.height = height
this.color = color
}
Funnel.prototype.draw = function(){
ctx.beginPath()
ctx.moveTo(this.x, this.y)
ctx.lineTo(this.x + this.width/2, this.y + this.height)
ctx.lineTo(this.x - this.width/2, this.y + this.height)
ctx.closePath()
ctx.fillStyle = this.color
ctx.fill()
}
var funnel1 = new Funnel(width/2, height/4, 200, 200, 'blue')
var funnel2 = new Funnel(width/2, height/2, 150, 150, 'green')
var funnel3 = new Funnel(width/2, 3*height/4, 100, 100, 'red')
funnel1.draw()
funnel2.draw()
funnel3.draw()
```
以上代码实现了一个简单的漏斗效果,分别使用三个 Funnel 对象画出了三个漏斗图形,即蓝色、绿色和红色。可以根据需要进行修改代码改变漏斗的大小和颜色。