Exemple de code pour créer un programme de dessin à l'aide d'un canevas HTML5 et de JavaScript

L'éditeur suivant vous présentera un exemple simple de création d'un programme de dessin utilisant le canvas de html5 et le JavaScript . L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un coup d'œil

Cet article vous guidera pour créer un programme de dessin simple utilisant Canvas et JavaScript.

Préparez d'abord l'élément conteneur Canvas, puis tout sera fait en JavaScript.

XML/HTML Code复制内容到剪贴板
<canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>

Obtenir l'environnement de dessin. L'objet contextuel fournit des méthodes et des propriétés pour dessiner sur le canevas

context = document.getElementById('canvasInAPerfectWorld').getContext("2d");

Commencer à dessiner. Processus

Nous devons d'abord stocker les coordonnées du point du chemin de dessin. La fonction addClick ajoute la valeur du point de coordonnées au tableau

var clickX = new Array();   
var clickY = new Array();   
var clickDrag = new Array();//存储路径点 
var paint;//是否绘制，mousedown时置为true 
function addClick(x, y, dragging)   
{   
  clickX.push(x);   
  clickY.push(y);   
  clickDrag.push(dragging);   
}

La fonction de redessinage redessinera l'intégralité. toile à chaque appel. Tout d’abord, nous effaçons le contenu sur le canevas et définissons la couleur, l’épaisseur et la méthode de connexion des lignes. Ensuite

tracez un chemin entre les deux points et dessinez les points de coordonnées dans le tableau dans l'ordre

function redraw(){   
  context.clearRect(0, 0, context.canvas.width,   context.canvas.height); // 清除画布内容   
  context.strokeStyle = "#df4b26";//设置线条颜色   
  context.lineJoin = "round";//当两条线条交汇时，创建圆形边角   
  context.lineWidth = 5;//线条粗细   
  for(var i=0; i < clickX.length; i++) {           
    context.beginPath();//开始一条路径，或重置当前的路径   
    if(clickDrag[i] && i){   
      context.moveTo(clickX[i-1], clickY[i-1]);   
     }else{   
       context.moveTo(clickX[i]-1, clickY[i]);   
     }   
     context.lineTo(clickX[i], clickY[i]);   
     context.closePath();   
     context.stroke();//绘制路径   
  }   
}

Événements requis pour le processus de dessin

1 événement mousedown

Lors du dessin de ce clic sur le canevas, cet événement sera déclenché pour s'exécuter. La fonction addClick est appelée et paint est défini sur true.

$('#canvas').mousedown(function(e){   
  var mouseX = e.pageX - this.offsetLeft;   
  var mouseY = e.pageY - this.offsetTop;   
  paint = true;   
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);   
  redraw();   
});

• 
  

2 événement mousemove

Une fois que la peinture définie dans mousedown est vraie, l'exécution de l'événement mousemove est déclenchée lorsque la souris bouge, tous les points déplacés par la souris sont enregistrés et le redessin est appelé en continu pour redessiner la toile.

$('#canvas').mousemove(function(e){   
   if(paint){   
     addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);   
     redraw();   
   }   
 });

3 événements mouseup

mouseup cliquez et relâchez la souris ou faites glisser et relâchez, indiquant que le dessin est terminé Chemin , définissez paint sur false.

$('#canvas').mouseup(function(e){   
   paint = false;   
 });

4 événement mouseleave

mouseleave mouse quitte l'élément canevas et définit la peinture sur false.

$('#canvas').mouseleave(function(e){   
  paint = false;   
});

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!