Maison > Article > interface Web > Implémentation HTML5 Canvas de la méthode de panorama à 360 degrés
Implémentation HTML5 Canvas de la méthode de panorama à 360 degrés
- 小云云original
- 2018-01-31 10:52:446276parcourir
Cet article présente principalement l'exemple de code pour implémenter un panorama à 360 degrés dans HTML5 Canvas. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.
De nombreux sites Web d'achat prennent désormais en charge des images panoramiques à 360° d'objets réels, et vous pouvez choisir de visualiser des échantillons à 360 degrés. Il s'agit d'une bonne expérience de consommation pour les acheteurs. Il existe de nombreux plug-ins de ce type sur Internet. jQuery. Il en existe des payants et des gratuits. En fait, un plug-in appelé 3deye.js est très utile. Le plug-in prend en charge les terminaux de bureau et mobiles iOS et Android. Son programme de démonstration : http://www.voidcanvas.com/demo/28823deye/
Après avoir joué cette démo moi-même, en suivant ses idées, des fonctions similaires sont disponibles. également implémenté à l'aide de HTML5 Canvas.
Parlons donc d'abord du principe de son panorama à 360 degrés
1. Tout d'abord, vous devez prendre des photos de l'objet réel. L'intervalle est de faire pivoter. chaque photo à 15 degrés, il faut donc 23 photos.
2. Une fois la photo prête, essayez de choisir le format JPG et recadrez-la à la taille appropriée.
3. Préchargez toutes les photos en JavaScript, qui peuvent afficher la précision du chargement en conjonction avec la barre de progression
4. Créez/obtenez l'objet Canvas, ajoutez des événements d'écoute de la souris et dessinez différents cadres de manière appropriée lorsque la souris bouge. gauche et droite. Le principe général est le suivant, simple !
Code d'implémentation :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>Full 360 degree View</title>
<script>
var ctx = null; // global variable 2d context
var frame = 1; // 23
var width = 0;
var height = 0;
var started = false;
var images = new Array();
var startedX = -1;
window.onload = function() {
var canvas = document.getElementById("fullview_canvas");
canvas.width = 440;// window.innerWidth;
canvas.height = 691;//window.innerHeight;
width = canvas.width;
height = canvas.height;
var bar = document.getElementById('loadProgressBar');
for(var i=1; i<24; i++)
{
bar.value = i;
if(i<10)
{
images[i] = new Image();
images[i].src = "0" + i + ".jpg";
}
else
{
images[i] = new Image();
images[i].src = i + ".jpg";
}
}
ctx = canvas.getContext("2d");
// mouse event
canvas.addEventListener("mousedown", doMouseDown, false);
canvas.addEventListener('mousemove', doMouseMove, false);
canvas.addEventListener('mouseup', doMouseUp, false);
// loaded();
// frame = 1
frame = 1;
images[frame].onload = function() {
redraw();
bar.style.display = 'none';
}
}
function doMouseDown(event) {
var x = event.pageX;
var y = event.pageY;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
console.log("mouse down at point( x:" + loc.x + ", y:" + loc.y + ")");
startedX = loc.x;
started = true;
}
function doMouseMove(event) {
var x = event.pageX;
var y = event.pageY;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
if (started) {
var count = Math.floor(Math.abs((startedX - loc.x)/30));
var frameIndex = Math.floor((startedX - loc.x)/30);
while(count > 0)
{
console.log("frameIndex = " + frameIndex);
count--;
if(frameIndex > 0)
{
frameIndex--;
frame++;
} else if(frameIndex < 0)
{
frameIndex++;
frame--;
}
else if(frameIndex == 0)
{
break;
}
if(frame >= 24)
{
frame = 1;
}
if(frame <= 0)
{
frame = 23;
}
redraw();
}
}
}
function doMouseUp(event) {
console.log("mouse up now");
if (started) {
doMouseMove(event);
startedX = -1;
started = false;
}
}
function getPointOnCanvas(canvas, x, y) {
var bbox = canvas.getBoundingClientRect();
return { x: x - bbox.left * (canvas.width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height)
};
}
function loaded() {
setTimeout( update, 1000/8);
}
function redraw()
{
// var imageObj = document.createElement("img");
// var imageObj = new Image();
var imageObj = images[frame];
ctx.clearRect(0, 0, width, height)
ctx.drawImage(imageObj, 0, 0, width, height);
}
function update() {
redraw();
frame++;
if (frame >= 23) frame = 1;
setTimeout( update, 1000/8);
}
</script>
</head>
<body>
<progress id="loadProgressBar" value="0" max="23"></progress>
<canvas id="fullview_canvas"></canvas>
<button onclick="loaded()">Auto Play</button>
</body>
</html>Adresse de téléchargement du fichier de démonstration-> fullview_jb51.rar
Recommandations associées :
Comment utiliser H5 Canvas pour implémenter un graphique dynamique 3D
Canevas HTML2 pour implémenter des captures d'écran du navigateur
JS+ Dynamic effet d'animation de montre mécanique dessiné par toile
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!