mouse hover mouse

Question

mouse hover mouse

Navigation

#1 by (0 votes)

1

I was able to do it with jquery, that's the code for whoever needs it.

 <script type="text/javascript" src="dist/jquery/jquery-1.12.3.min.js"></script>
 <canvas id="diamond" width="100" height="100"></canvas>
    <script type="text/javascript">

        var canvas = document.getElementById("diamond");
        var context = canvas.getContext("2d"); 

    var diamond = function (x,y){
        context.beginPath();
        context.moveTo(25,15);   
        context.lineTo(40,25);
        context.lineTo(25,35);
        context.lineTo(10,25);     

        context.lineWidth = 1;
        context.fillStyle = "#F2673D";     

        context.closePath(); 

        context.fill();     
    }

    diamond();

    $(document).ready(function() {      

        $("#diamond").hover(function() {
            $(this).stop().animate({ marginTop: "-48px" }, 200);                        
        },function(){
            $(this).stop().animate({ marginTop: "-50px" }, 300);                        
        }); 

});
</script>

javascript canvas hover

asked by anonymous 03.05.2016 / 01:56

1 answer

Execute JavaScript code when clicking link within DIV Requesting in the Twitter API using Jquery and Ajax

score 0 · Answer 1

This is an example. Elaborate more on it.

var canvas = document.getElementById("diamond");
var context = canvas.getContext("2d"); 

var diamond = function (x,y){
    x = x || 0;
    y = y || 0;
    context.beginPath();
    context.moveTo(25 + x,15 + y);   
    context.lineTo(40 + x,25 + y);
    context.lineTo(25 + x,35 + y);
    context.lineTo(10 + x,25 + y);     
    context.lineWidth = 0;
    context.fillStyle = "#F2673D";     
    context.closePath();     
    context.fill();     
}

function clearCanvas() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function move(p){
  if (p < 200 ){
    setTimeout(function(){
      clearCanvas();
      diamond(p, p);    
      p += 10;
     move(p);
    }, 1000);
  }
}

move(10);

You have an example running here:

link