Comment encapsuler Canvas dans un plug-in en js

Cette fois, je vais vous montrer comment encapsuler Canvas dans un plug-in en utilisant js Quelles sont les précautions pour encapsuler Canvas dans un plug-in en utilisant js. est un cas pratique, jetons-y un coup d'œil.

J'ai déjà dit que je voulais écrire un plug-in pour dessiner des graphiques statistiques sur toile, et maintenant je l'ai écrit

Parlons d'abord des fonctions implémentées :

 1. Vous pouvez dessiner des graphiques statistiques proportionnellement en personnalisant les attributs de coordonnées de l'axe X et les attributs de coordonnées de l'axe Y

  2. Vous pouvez choisir de dessiner un graphique de remise ou un histogramme, ou les deux

  3. Vous pouvez définir librement la couleur de remise, la couleur de coordination, la couleur de la colonne et la couleur de la bordure de la toile. Bien sûr, vous pouvez également choisir d'avoir ou non la bordure

.  4. Vous pouvez choisir d'implémenter ou non l'animation des histogrammes et des graphiques de remise

Processus de mise en œuvre

Dessinez des coordonnées - dessinez des flèches - marquez l'axe X et l'axe Y - dessinez un histogramme - dessinez un tableau de remise

Sans plus attendre, voici le code

(function(window,document){
 var ChartDraws = function(options){
  if(!(this instanceof ChartDraws))return new ChartDraws(options);
  this.options = $.extend({
   //报表所需的参数
   "containerId" : "",  //canvas所在容器id
   "canvasWidth" : 400,
   "canvasHeight" : 300,
   "paddingLeft" : 20,
   "paddingTop" : 20,
   "columnChartData" :[], //柱形图的数量和对应得名称以及百分比
   "yChartData" :[],   //y轴的数量及名称
   "axisColor" : "white",  //坐标轴颜色
   "columnChartColor" : "#EEE685", //柱形图颜色
   "isNeedAnimation" : true, //是否需要动画
   "isNeedLineChart" : true, //是否需要折线图
   "isNeedColumnChart" : true, //是否需要柱形图
   "lineChartColor" : "#90EE90", //折线图颜色，当isNeedLineChart=true时有效
   "isNeedBorder" : false,  //canvas是否需要外边框
   "borderColor" : "white"  //外边框颜色
  },options);
  if(this.options.canvasWidth<=500)
  {
   this.axisBorderWidth = 3;
   this.fontSize = 8;
  }
  else if(this.options.canvasWidth<=800){
   this.axisBorderWidth = 4;
   this.fontSize = 12;
  }
  else{
   this.axisBorderWidth = 5;
   this.fontSize = 16;
  }
  var self = this;
  _init();
  function _init(){
   var canvasDom = document.createElement("canvas");
   canvasDom.id = self.options.containerId+"_"+"canvas";
   canvasDom.width = self.options.canvasWidth;
   canvasDom.height = self.options.canvasHeight;
   if(self.options.isNeedBorder){
    canvasDom.style.borderWidth = 1;
    canvasDom.style.borderStyle = "solid";
    canvasDom.style.borderColor = self.options.borderColor;
   }
   document.getElementById(self.options.containerId).appendChild(canvasDom);
   self.context = document.getElementById(self.options.containerId+"_"+"canvas");
   self.ctx = self.context.getContext("2d");
   _drawAxis();
  }
  function _drawAxis(){
   var XYData =transformAxis( [{x:self.options.paddingLeft,y:self.options.canvasHeight-self.options.paddingTop},{x:self.options.paddingLeft,y:self.options.paddingTop},{x:self.options.canvasWidth-self.options.paddingLeft,y:self.options.paddingTop}]);
   self.ctx.strokeStyle=self.options.axisColor;
   drawLine(self.ctx,XYData,self.axisBorderWidth);
   //画三角箭头
   //画y轴三角箭头
   drawLine(self.ctx,transformAxis([{x:self.options.paddingLeft-self.axisBorderWidth,y:self.options.canvasHeight-self.options.paddingTop-self.axisBorderWidth*2},{x:self.options.paddingLeft,y:self.options.canvasHeight-self.options.paddingTop},{x:self.options.paddingLeft+self.axisBorderWidth,y:self.options.canvasHeight-self.options.paddingTop-self.axisBorderWidth*2}]),self.axisBorderWidth);
   //画x轴三角箭头
   drawLine(self.ctx,transformAxis([{x:self.options.canvasWidth-self.options.paddingLeft-self.axisBorderWidth*2,y:self.options.paddingTop+self.axisBorderWidth},{x:self.options.canvasWidth-self.options.paddingLeft,y:self.options.paddingTop},{x:self.options.canvasWidth-self.options.paddingLeft-self.axisBorderWidth*2,y:self.options.paddingTop-self.axisBorderWidth}]),self.axisBorderWidth);
   _drawCoordinatePoints();
  }
  function _drawCoordinatePoints(){
   self.reactAngleWidth = (1-2*0.04)*(self.options.canvasWidth-(2*self.options.paddingLeft))/(self.options.columnChartData.length*2-1);
   self.lineDataList = [];
   for(var i = 0;i<self.options.columnChartData.length;i++)
   {
    drawXText(self.ctx,2*self.options.columnChartData[i].NO*self.reactAngleWidth+self.options.paddingLeft+0.04*(self.options.canvasWidth-(2*self.options.paddingLeft))+self.reactAngleWidth/2,self.options.paddingTop/2,self.options.columnChartData[i].Name);
    self.lineDataList.push({
     x:2*self.options.columnChartData[i].NO*self.reactAngleWidth+self.options.paddingLeft+0.04*(self.options.canvasWidth-(2*self.options.paddingLeft))+self.reactAngleWidth/2,
     y:self.options.canvasHeight-(self.options.paddingTop+(self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[i].PT)
    })
   }
   //画Y轴title 画y轴虚线
   self.reactAngleHeight = (self.options.canvasHeight-2*self.options.paddingTop)/(self.options.yChartData.length+1);
   for(var j = 0;j<self.options.yChartData.length;j++)
   {
    drawYText(self.ctx,3*self.options.paddingLeft/4,self.options.paddingTop+self.reactAngleHeight*(j+1),self.options.yChartData[j].Name);
    //画虚线
    drawDottedLine(self.ctx,self.options.paddingLeft,self.options.paddingTop+self.reactAngleHeight*(j+1),self.options.canvasWidth-self.options.paddingLeft,self.options.paddingTop+self.reactAngleHeight*(j+1),self.options.canvasWidth-2*self.options.paddingLeft,10,self.axisBorderWidth/2);
   }
   _drawColumnChart();
  }
  function _drawColumnChart(){
   //柱形图循环
   var reactAngleTimer = 1;
   function loopColumnChart()
   {
    var columnChartLooped = window.requestAnimationFrame(loopColumnChart);
    if(reactAngleTimer<=100)
    {
     for(var k=0;k<self.options.columnChartData.length;k++)
     {
      self.ctx.fillStyle =self.options.columnChartColor;
      drawRectangle(self.ctx,self.lineDataList[k].x-self.reactAngleWidth/2,self.options.canvasHeight-((self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[k].PT*reactAngleTimer/100+self.options.paddingTop),self.reactAngleWidth,(self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[k].PT*reactAngleTimer/100);
     }
     reactAngleTimer++;
    }
    else
    {
     window.cancelAnimationFrame(columnChartLooped);
     columnChartLooped = null;
     reactAngleTimer = 1;
     if(self.options.isNeedLineChart)
     {
      loopLineChart();
     }
    }
   }
   //折线图循环
   var lineTimer = 0;
   function loopLineChart()
   {
    var lineChartLooped = window.requestAnimationFrame(loopLineChart);
    if(lineTimer<self.lineDataList.length-1)
    {
     self.ctx.lineWidth = 2*self.axisBorderWidth/3;
     if(lineTimer == 0)
     {
      drawCircle(self.ctx,self.lineDataList[lineTimer].x,self.lineDataList[lineTimer].y);
     }
     drawCircle(self.ctx,self.lineDataList[lineTimer+1].x,self.lineDataList[lineTimer+1].y);
     self.ctx.beginPath();
     self.ctx.moveTo(self.lineDataList[lineTimer].x,self.lineDataList[lineTimer].y);
     self.ctx.lineTo(self.lineDataList[lineTimer+1].x,self.lineDataList[lineTimer+1].y);
     self.ctx.strokeStyle = self.options.lineChartColor;
     self.ctx.lineWidth = 2*self.axisBorderWidth/3;
     self.ctx.stroke();
     lineTimer++;
    }
    else
    {
     window.cancelAnimationFrame(lineChartLooped);
     lineChartLooped = null;
     lineTimer = 0;
    }
   }
   //画柱形图
   function drawRectangle(context,x,y,width,height){
    context.beginPath();
    context.fillRect(x,y,width,height);
   }
   //画圆
   function drawCircle(context,x,y){
    context.beginPath();
    context.arc(x,y,self.axisBorderWidth/2,0,2*Math.PI,true);
    context.strokeStyle=self.options.lineChartColor;
    context.stroke();
    context.closePath();
   }
   if(self.options.isNeedAnimation)
   {
    if(self.options.isNeedColumnChart)
    {
     loopColumnChart();
    }
    else
    {
     if(self.options.isNeedLineChart) {
      loopLineChart();
     }
    }
   }
   else
   {
    if(self.options.isNeedColumnChart)
    {
     for(var k=0;k<self.options.columnChartData.length;k++)
     {
      self.ctx.fillStyle =self.options.columnChartColor;
      drawRectangle(self.ctx,self.lineDataList[k].x-self.reactAngleWidth/2,self.options.canvasHeight-((self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[k].PT+self.options.paddingTop),self.reactAngleWidth,(self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[k].PT);
     }
    }
    if(self.options.isNeedLineChart) {
     for (var l = 0; l < self.lineDataList.length - 1; l++) {
      self.ctx.lineWidth = 4;
      if (l == 0) {
       drawCircle(self.ctx, self.lineDataList[l].x, self.lineDataList[l].y);
      }
      drawCircle(self.ctx, self.lineDataList[l + 1].x, self.lineDataList[l + 1].y);
      self.ctx.beginPath();
      self.ctx.moveTo(self.lineDataList[l].x, self.lineDataList[l].y);
      self.ctx.lineTo(self.lineDataList[l + 1].x, self.lineDataList[l + 1].y);
      self.ctx.strokeStyle = self.options.lineChartColor;
      self.ctx.lineWidth = 2*self.axisBorderWidth/3;
      self.ctx.stroke();
     }
    }
   }
  }
  function transformAxis(data)
  {
   var newData=[];
   for(var i=0;i<data.length;i++){
    newData.push({
     x:data[i].x,
     y:self.options.canvasHeight-data[i].y
    })
   }
   return newData;
  }
  function drawLine(context,point,width){
   context.beginPath();
   context.moveTo(point[0].x,point[0].y);
   if(point.length>2)
   {
    for(var i=1;i<point.length;i++)
    {
     context.lineTo(point[i].x,point[i].y);
    }
   }
   context.lineWidth = width;
   context.lineJoin=&#39;round&#39;;
   context.stroke();
   context.closePath();
  }
  //画y轴title
  function drawYText(context,x,y,str) {
   context.beginPath();
   context.font = &#39;{fontSize} Microsoft Yahei&#39;.replace("{fontSize}",self.fontSize+"px");
   context.fillStyle = &#39;white&#39;;
   context.textAlign = &#39;right&#39;;
   context.fillText(str,x,self.options.canvasHeight-y);
   context.closePath();
  }
  //画x轴title
  function drawXText(context,x,y,str) {
   context.beginPath();
   context.font = &#39;{fontSize} Microsoft Yahei&#39;.replace("{fontSize}",self.fontSize+"px");
   context.fillStyle = &#39;white&#39;;
   context.textAlign = &#39;center&#39;;
   context.fillText(str,x,self.options.canvasHeight-y);
   context.closePath();
  }
  function drawDottedLine(context,x1,y1,x2,y2,totalLength,length,lineWidth){
   y1 = self.options.canvasHeight-y1;
   y2 = self.options.canvasHeight-y2;
   var dashLen = length === undefined ? 5 : length;
   //计算有多少个线段
   context.beginPath();
   var num = Math.floor(totalLength/dashLen);
   context.lineWidth = lineWidth;
   for(var i = 0 ; i < num; i++)
   {
    context[i%2==0 ? &#39;moveTo&#39; : &#39;lineTo&#39;](x1+(x2-x1)/num*i,y1+(y2-y1)/num*i);
   }
   context.stroke();
  }
 };
 window.ChartDraws = ChartDraws;
}(window,document));

Il y en a un autre ci-dessous qui implémente la compatibilité du navigateur requestAnimationFrame

(function(){
 var lastTime = 0;
 var prefixes = ['ms','webkit','o','moz']; //各浏览器前缀
 var requestAnimationFrame = window.requestAnimationFrame;
 var cancelAnimationFrame = window.cancelAnimationFrame;
 var prefix;
 //通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
 for( var i = 0; i < prefixes.length; i++ ) {
  if ( requestAnimationFrame && cancelAnimationFrame ) {
   break;
  }
  prefix = prefixes[i];
  requestAnimationFrame = requestAnimationFrame || window[ prefix + &#39;RequestAnimationFrame&#39; ];
  cancelAnimationFrame = cancelAnimationFrame || window[ prefix + &#39;CancelAnimationFrame&#39; ] || window[ prefix + &#39;CancelRequestAnimationFrame&#39; ];
 }
 //如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
 if ( !requestAnimationFrame || !cancelAnimationFrame ) {
  requestAnimationFrame = function( callback, element ) {
   var currTime = new Date().getTime();
   //为了使setTimteout的尽可能的接近每秒60帧的效果
   var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) );
   var id = window.setTimeout( function() {
    callback( currTime + timeToCall );
   }, timeToCall );
   lastTime = currTime + timeToCall;
   return id;
  };
  cancelAnimationFrame = function( id ) {
   window.clearTimeout( id );
  };
 }
 window.requestAnimationFrame = requestAnimationFrame;
 window.cancelAnimationFrame = cancelAnimationFrame;
}());

Ci-joint

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1421045
• 
  Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine

  4264597
• 
  Tutoriel vidéo JAVA pour débutants

  2514003
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  506101
• 
  Tutoriel d'introduction PHP base zéro

  861176

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1421045 temps d'étude
• 
  Tutoriel vidéo JAVA pour débutants

  2514003 temps d'étude
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  506101 temps d'étude
• 
  Introduction rapide au développement web front-end

  215595 temps d'étude
• 
  Maîtrisez les didacticiels vidéo PS à partir de zéro

  885690 temps d'étude

• 
  [Web front-end] Démarrage rapide de Node.js

  7165 temps d'étude
• 
  Collection complète de cours full-stack de développement Web étranger

  5561 temps d'étude
• 
  Aller au langage pratique GraphQL

  4684 temps d'étude
• 
  Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape

  670 temps d'étude
• 
  Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures

  23682 temps d'étude

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

• [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery
• [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3
• [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5
• [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery
• [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS
• [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique
• [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image
• [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

• [Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG)
• [Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)
• [image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)
• [Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG)
• [Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)
• [Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes
• [image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)
• [Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet