1
我想要一個鼠標拖拽事件，當我拖動鼠標移動的速度並相應地移動鼠標時，它會旋轉並緩慢停止。如何在此示例中添加ondrag鼠標事件
這個HTML和JavaScript會給出一個在時間間隔旋轉的立方體33
window.onload = startDemo;
function Point3D(x,y,z) {
this.x = x;
this.y = y;
this.z = z;
this.rotateX = function(angle) {
var rad, cosa, sina, y, z
rad = angle * Math.PI/180
cosa = Math.cos(rad)
sina = Math.sin(rad)
y = this.y * cosa - this.z * sina
z = this.y * sina + this.z * cosa
return new Point3D(this.x, y, z)
}
this.rotateY = function(angle) {
var rad, cosa, sina, x, z
rad = angle * Math.PI/180
cosa = Math.cos(rad)
sina = Math.sin(rad)
z = this.z * cosa - this.x * sina
x = this.z * sina + this.x * cosa
return new Point3D(x,this.y, z)
}
this.rotateZ = function(angle) {
var rad, cosa, sina, x, y
rad = angle * Math.PI/180
cosa = Math.cos(rad)
sina = Math.sin(rad)
x = this.x * cosa - this.y * sina
y = this.x * sina + this.y * cosa
return new Point3D(x, y, this.z)
}
this.project = function(viewWidth, viewHeight, fov, viewDistance) {
var factor, x, y
factor = fov/(viewDistance + this.z)
x = this.x * factor + viewWidth/2
y = this.y * factor + viewHeight/2
return new Point3D(x, y, this.z)
}
}
var vertices = [
new Point3D(-1,1,-1),
new Point3D(1,1,-1),
new Point3D(1,-1,-1),
new Point3D(-1,-1,-1),
new Point3D(-1,1,1),
new Point3D(1,1,1),
new Point3D(1,-1,1),
new Point3D(-1,-1,1)
];
// Define the vertices that compose each of the 6 faces. These numbers are
// indices to the vertex list defined above.
var faces = [[0,1,2,3],[1,5,6,2],[5,4,7,6],[4,0,3,7],[0,4,5,1],[3,2,6,7]];
// Define the colors for each face.
var colors = [[255,0,0],[0,255,0],[0,0,255],[255,255,0],[0,255,255],[255,0,255]];
var angle = 0;
/* Constructs a CSS RGB value from an array of 3 elements. */
function arrayToRGB(arr) {
if(arr.length == 3) {
return "rgb(" + arr[0] + "," + arr[1] + "," + arr[2] + ")";
}
return "rgb(0,0,0)";
}
function startDemo() {
canvas = document.getElementById("thecanvas");
if(canvas && canvas.getContext) {
ctx = canvas.getContext("2d");
}setInterval(loop,33);
}
function loop() {
var t = new Array();
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(0,0,400,250);
for(var i = 0; i < vertices.length; i++) {
var v = vertices[i];
var r = v.rotateZ(angle).rotateX(angle);
var p = r.project(400,250,200,4);
t.push(p)
}
var avg_z = new Array();
for(var i = 0; i < faces.length; i++) {
var f = faces[i];
avg_z[i] = {"index":i, "z":(t[f[0]].z + t[f[1]].z + t[f[2]].z + t[f[3]].z)/4.0};
}
avg_z.sort(function(a,b) {
return b.z - a.z;
});
for(var i = 0; i < faces.length; i++) {
var f = faces[avg_z[i].index]
ctx.fillStyle = arrayToRGB(colors[avg_z[i].index]);
ctx.beginPath()
ctx.moveTo(t[f[0]].x,t[f[0]].y)
ctx.lineTo(t[f[1]].x,t[f[1]].y)
ctx.lineTo(t[f[2]].x,t[f[2]].y)
ctx.lineTo(t[f[3]].x,t[f[3]].y)
ctx.closePath()
ctx.fill()
}
angle += 2
}<!DOCTYPE html>
<html>
<head>
<title>HTML5 Experiment: A Rotating Solid Cube</title>
\t \t </head>
<body>
<canvas id="thecanvas" width="500" height="250">
Your brows<a href=#>Click here</a> to watch the video.
</canvas>
</body>
</html>請幫助我這個代碼
我需要這個https://youtu.be/Cf8rhrEyzYQ請幫助 –