Déplacer rectangle d'un canvas HTML avec JS

Résolu/Fermé

dachiasse Messages postés 1709 Date d'inscription samedi 12 septembre 2020 Statut Membre Dernière intervention 13 mai 2021 - 5 févr. 2021 à 01:20
dachiasse Messages postés 1709 Date d'inscription samedi 12 septembre 2020 Statut Membre Dernière intervention 13 mai 2021 - 7 févr. 2021 à 04:28

Salut,

Je cherche à faire un mouvement depuis le curseur de la souris. Je souhaite récupérer la coordonnée des abscisses pour effectuer le déplacement d'un rectangle rouge, comme la barre du joueur d'un casse-briques.

Si je commente la fonction

moveMouse(e)

j'obtiens bien un rectangle gris qui prend tout le canvas qui prend tout le body de la page. Mais, si je décommente

moveMouse(e)

, j'ai une page blanche.

Je ne connais pas bien JS, j'avoue ne pas avoir cherché où sont affichés les erreurs qui pourraient m'aider j'en suis conscient.

Je poste le code qui est un brouillon :

<!-- Dans ce fichier brouillon, il y aura HTML, CSS et JS -->
<!doctype html>
<html lang="fr-fr">
<head>
<style>
* { margin:0; padding:0 }
html, body { width:100%; height:100%; }
canvas { display: block; }
</style>
<meta charset="utf-8">
<title>Animation souris barre horizontale !</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
(function(){
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var start_pixel = 0;
    var bar_width = 150;
    var bar_height = 30;
    var bar_center = bar_width / 2;
    var bar_x_position = 0;
    window.addEventListener("resize", resizeCanvas, false);
    window.addEventListener("mousemove", function(){moveMouse(window.event)}, false);

    function resizeCanvas(){
        window_width = window.innerWidth;
        window_height = window.innerHeight;
        bar_y_position = window_height - bar_height;
        canvas.width = window_width;
        canvas.height = window_height;
        drawStuff();
    }
    resizeCanvas();

    function moveMouse(e) {
        var x = e.clientX;
        drawStuff();
    }
   

    function drawStuff(){
        context.fillStyle = "grey";
        context.fillRect(start_pixel, start_pixel, window_width, window_height);
        context.fillStyle = "red";
        if (x - bar_center < 0) {
            x = bar_center;
        }
        if (x + bar_center > window_width) {
            x = window_width - bar_center;
        }
        x = x - bar_center;
        context.fillRect(x, bar_y_position, bar_width, bar_height);
    }
})();
</script>
</body>
</html>

D'après mes recherches, l'événement "mousemove" a un argument pour accéder à l'attribut

clientX

qui indique l'abscisse du curseur de la souris. Sauf que je ne sais pas bien comment ajouter un paramètre à la fonction de callback d'

addEventListener()

A voir également:

Déplacer rectangle d'un canvas HTML avec JS
Déplacer une colonne excel - Guide
Canvas gratuit - Télécharger - Divers Photo & Graphisme
Editeur html - Télécharger - HTML
Déplacer la barre des taches windows 11 - Guide
Nbsp html ✓ - Forum Webmastering

2 réponses

Réponse 1 / 2

dachiasse Messages postés 1709 Date d'inscription samedi 12 septembre 2020 Statut Membre Dernière intervention 13 mai 2021 148
Modifié le 7 févr. 2021 à 04:29

Salut,

J'en ai bavé. J'ai réussi :

<!-- Dans ce fichier brouillon, il y aura HTML, CSS et JS -->
<!doctype html>
<html lang="fr-fr">
<head>
<style>
* { margin:0; padding:0 }
html, body { width:100%; height:100%; }
canvas { display: block; }
</style>
<meta charset="utf-8">
<title>Animation souris barre horizontale !</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
(function(){
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    
    var bar_width = 150;
    var bar_height = 30;
    var bottom_space_bottom_canvas = 30;
    
    window.addEventListener("resize", resizeCanvas, false);
    canvas.addEventListener("mousemove", moveMouse, false);

    function resizeCanvas(){
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        drawStuff(window.innerWidth/2-bar_width/2, canvas.height-bottom_space_bottom_canvas-bar_height);
    }
    resizeCanvas();

    function moveMouse(e) {
        var x = e.clientX;
        if (x < bar_width / 2)
            x = bar_width / 2;
        if (x > canvas.width - bar_width / 2)
            x = canvas.width - bar_width / 2;
        drawStuff(x-bar_width / 2, canvas.height-bottom_space_bottom_canvas-bar_height);
    }
   
    function drawStuff(left, top) {
        context.fillStyle = "grey";
        context.fillRect(0,0, canvas.width, canvas.height);

        context.fillStyle = "red";
        context.fillRect(left, top, bar_width, bar_height);
    }
})();
</script>
</body>
</html>

Prochaine étape, créer GTA VII !

Réponse 2 / 2

dachiasse Messages postés 1709 Date d'inscription samedi 12 septembre 2020 Statut Membre Dernière intervention 13 mai 2021 148
5 févr. 2021 à 14:36

Ce n'est pas le même langage. Mais, voici ce que je veux faire. Ici en python 3 avec pygame :

import pygame as pg

pg.init()

running = True
display_size = (640,480)
display = pg.display.set_mode(display_size)
rectangle_bar = pg.Rect(245,420,150,30)
x = 0
fps = 50
clock = pg.time.Clock()

while running:
    for event in pg.event.get():
        if event.type == pg.QUIT:
            running = False
        if event.type == pg.MOUSEMOTION:
            x = event.pos[0]

    display.fill("grey")

    if x < 75:
        x = 75
    if x > 565:
        x = 565

    # center
    rectangle_bar.centerx = x   

    pg.draw.rect(display, "red", rectangle_bar)

    pg.display.update()
    clock.tick(fps)
            

pg.quit()

Discussions similaires

smyley rectangulaire

Javascript Arrondi à 2 chiffres après la virgule

code couleur associé a une image

Open office image arriere plan

que signifie les petits rectangles blancs à la fin de mes sms ?

Discussions similaires

Newsletters