canvas rotate 累加旋轉_微信小程式canvas畫圖總結

本章為自己使用微信小程式canvas畫圖的總結，包括環形圖和折線圖。先上效果圖

環形圖和折線圖

一：環形圖。畫環形圖非常簡單，程式小白也無需慌張。 先上代碼

環形圖源碼

重點歸納：

• CanvasContext.beginPath();//在最開始的時候相當于調用了一次beginPath；如果在一個canvas中需要畫多條線，需要調用beginPath來開啟路徑，調用closePath()來關閉路徑。closePath會連接配接起點和終點。
• 如果沒有調用

  fill

  或者

  stroke

  并開啟了新的路徑，那之前的路徑将不會被渲染
• ctx.setFillStyle('red')；//填充色 。ctx.setStrokeStyle('red')；//描邊顔色。設定字型顔色使用ctx.setFillStyle('red')；
• context.draw();//将之前在繪圖上下文中的描述（路徑、變形、樣式）畫到 canvas 中。不需要像stroke一樣每開啟一條路徑都需要調用一次stroke.調用一次draw()方法會将之前在畫布中繪制的圖形都畫出來

二：第一張圖折現圖的源碼

重點歸納：

• 坐标系轉換。canvas的坐标起點是左上角，我們正常思維的坐标系起點為左下角，這時候需要進行坐标系轉換。 ctx.translate(35, 130);//平移原點坐标 ctx.rotate(Math.PI);//将坐标系旋轉180°，得到與數學坐标系水準相反的坐标系 ctx.scale(-1, 1);//将坐标系水準翻轉
• 翻轉坐标系後文字也是反的，是以需要在翻轉坐标系之前先填充坐标軸文字
• 淡藍色折現區域//利用兩個金額點和兩個坐标點形成閉合區域，然後填充。
• ctx.setFillStyle('rgba(14,156,255,0.2)');折現和折現區域是同一個色号，折現區域設定了透明度