Canvasについて

最近、ウィジェットcanvasのニーズについて  canvasに対する理解も以前より深くここでcanvasを使ったいくつかのテクニックをまとめてみましょう(ここでは小さなプログラムcanvasを例にhtml 5 canvasを例に挙げます)一つ、cnavasコード量の問題canvasを使ったことがある人はcanvasの膨大なコード量に驚いたはずです栗を挙げてcanvasで1段を書くと少なくとも2段のコードを使います 

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFontSize(20)
ctx.fillText('PHP         ', 20, 20)

ctx.draw()

もちろん理想的には美しく表示され、残酷です.通常の使用シーンでは、フォントの色を設定し、位置合わせをします.のでは、私たちは平均5行のコードぐらいを必要とします.そのcanvasの内容が多い場合、このコードは巨大です.では、どうやってこんな太ったデブを片付けますか. 

//          html5canvas  let        
data:{
    canvasData:{
      txt: `javascript`//  
      size: 6, //    
      color: "#fff", //    
      x: 5, //       
      y: 15, //       
      shadow: true //      
    }
}
//    
const ctx = wx.createCanvasContext('myCanvas')
for (var i = 0; i < this.data.canvasData.length; i++) {
    ctx.setFontSize(this.data.canvasData[j].size);
    ctx.setFillStyle(this.data.canvasData[j].color);
    ctx.fillText()
}
ctx.draw(true);

このように操作した後、私たちが描くときにcanvasDataに追加する文字を加えるだけで、ある友达は文字OKを聞いて、その胸の弟は私が画像や他のどのように整えますか?
同じようにcanvasDataにImgaeを追加しますか?

data: {
    //    
    dataImage: [{
        url: ``, //    ，          
        x: 0, //        
        y: 0, //         
        height: 100, //    
        width: 100, //    
        isCircle: false, //    
        isBackground: true //      

      }, {
        url: '',
        x: 5,
        y: 45,
        height: 35,
        width: 90,
        background: 'rgba(0,0,0,0.4)', 
        isCircle: false,
        isBackground: false
      }
   }],
   dataFont: [
      txt: `PHP         `, //  
      size: 6, //  
      color: "#fff", //    
      x: 5, //       
      y: 15, //       
      shadow: true //      
    }, {
      txt: `      `,
      size: 21,
      color: "#fff",
      x: 5,
      y: 20,
      shadow: true
    }]
},
//    
const ctx = wx.createCanvasContext('myCanvas')
for (var i = 0; i < this.data.dataFont.length; i++) {    
    ctx.save()//             draw               
    ctx.setFontSize(this.data.canvasData[j].size);
    ctx.setFillStyle(this.data.canvasData[j].color);
    ctx.fillText()
    ctx.restore();
}
for (var i = 0; i < this.data.dataImage.length; i++) {
        if (this.data.dataImage[i].url == "") {
          //     
          ctx.save()
          ctx.beginPath()
          ctx.rect(this.data.dataImage[i].x, this.data.dataImage[i].y, this.data.dataImage[i].width, this.data.dataImage[i].height)
          ctx.setFillStyle('rgba(0,0,0,.4)')
          ctx.fill()
          ctx.restore();
        }else{
            ctx.save()
            ctx.drawImage(this.data.dataImage[i].url, this.data.dataImage[i].x, this.data.dataImage[i].y, this.data.dataImage[i].width, this.data.dataImage[i].height);
            ctx.restore();
        }
}
ctx.draw(true);

それ以来、canvasという巨大な獣たちは、dataImageとdataFontの内容を新たに追加することで、おとなしく私たちを驯服させなければならない.文字を自动的に改行したことがある.canvasの友达も、canvasの文字が自动的に改行できないことをよく知っているはずだ.ではcanvasという言うことを聞かない熊の子供はどうやっておとなしくさせますか?まず考えてみましょう同じようにdataFontsにautoBreakとbreakLengthのプロパティを追加します.自動改行するかどうかと、満数の文字で改行するかどうかを表します.その後、文字列の切り取り操作を使用して改行を実現します.

data: {
   dataFonts: [
      txt: `PHP         `, //  
      size: 6, //  
      color: "#fff", //    
      x: 5, //       
      y: 15, //       
      shadow: true //      
      autoBreak:true,
      breakLength:4
        
    }, {//    
      txt: ``,
      size: 21,
      color: "#fff",
      x: 5,
      y: 20,
      shadow: true
    }]
},
//    
const ctx = wx.createCanvasContext('myCanvas')
for (var j = 0; j < this.data.dataFonts.length; j++) {    
   if (this.data.dataFonts[j].autoBreak) {
          let fontWidth = 0,//     
            numberWidth = Math.floor(ctx.measureText("0").width),//         
            chinaWidth = Math.floor(ctx.measureText(" ").width)//         
            //              floor           round ceil
          for (var z = 0; z < this.data.dataFonts[j].txt.length; z++) {
            if (/^[\u2E80-\u9FFF]|["，"]+$/.test(this.data.dataFonts[j].txt[z]) == true) {//                       
              fontWidth += chinaWidth
            } else {
              fontWidth += numberWidth
            }
//      breakLength    ，  （         ）
            if (fontWidth > this.data.dataFonts[j].breakLength * chinaWidth) {
             let cutFonts = dataFonts[j].txt.substring(z, dataFonts[j].txt.length)
              dataFonts[j + 1].txt = cutFonts + dataFonts[j + 1].txt
              dataFonts[j].txt = dataFonts[j].txt.substring(0, z)
              break;
            }
          }
        }
}
 ctx.setFontSize(this.data.dataFonts[j].size);
        ctx.setFillStyle(this.data.dataFonts[j].color);
        ctx.fillText(this.data.dataFonts[j].txt, (this.data.dataFonts[j].x) + fontLong, this.data.dataFonts[j])
ctx.draw(true);

三、円形画像の描画canvasを使う时よく出会うのは円形画像を描くことです.例えば、ユーザーのアイコンなど、canvasAPIには円形画像の方法がありません.明らかに私たちもパッケージのこの古い道を歩むしかありません.では、私たちはどのように円形の画像を実現しますか.  まず、画像と円を重ねてAPIのclip()の切り取り方法を調べて、画像を切り取ることができます.

data:{
    dataImage: [{
        url: ``, //    
        x: 0,
        y: 0, 
        height: 100,
        width: 100, 
        isCircle: true, //    
    }]
}
//    
for (var i = 0; i < this.data.dataImage.length; i++) {
    if(this.data.dataImage[i].isCircle==true){
         ctx.save()
         ctx.drawImage(this.data.dataImage[i].url, this.data.dataImage[i].x , this.data.dataImage[i].y, this.data.dataImage[i].width, this.data.dataImage[i].height);
            ctx.restore();
    }
        
}
ctx.draw(true);

本文はまったく不才な少しの小さな見解で,誤りがあれば互いに学び合うことを望んでいる.