Déplacer rectangle d'un canvas HTML avec JS

Résolu

dachiasse Messages postés 1709 Date d'inscription Statut Membre Dernière intervention -
dachiasse Messages postés 1709 Date d'inscription Statut Membre Dernière intervention - 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 colonne excel - Guide
Editeur html - Télécharger - HTML
Canvas gratuit - Télécharger - Divers Photo & Graphisme
Déplacer barre des taches windows 11 - Guide
Round js ✓ - Forum Javascript

2 réponses

Réponse 1 / 2

dachiasse Messages postés 1709 Date d'inscription Statut Membre Dernière intervention 150

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 Statut Membre Dernière intervention 150

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

arriere plan

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

smyley rectangulaire

la balise <br> ou <br />

symbole sms

Votre réponse

Discussions similaires