QML中的Canvas的畫布功能其實和js以及h5的Canvas基本一樣，以下是我使用QML的Canvas繪出漸變效果的代碼，在過程中出現的幾個問題，都是由幾個關鍵的數據控制的，這個一般在網上和幫助文檔都很少有資料，記錄下
//mainView's right view background,the size is fiximport QtQuick 2.0import QtQuick.Controls 1.2import QtQuick.Controls.Styles 1.2import QtQuick.Window 2.2Rectangle { width: 1364 height: 1080 border.width: 0 color: "transparent"; Canvas{ id:myCanvas; anchors.fill: parent; onPaint: { var ctx = myCanvas.getContext("2d"); var grd = ctx.createLinearGradient(0,0,1364,0); //設置漸變的范圍 x,y,x1,y1 //由于設置的時兩個，所有只有兩種，當設置出現的三個的時候，會正常 1-2-3類型的顯示漸變（漸變的屬性時根據設置的顏色的值的變化，r，g，b，a） grd.addColorStop(0.0,Qt.rgba(0,0,0,0)); grd.addColorStop(0.32,Qt.rgba(0,0,0,0.75));//漸變設置到40%的位置時停止 grd.addColorStop(1.0,Qt.rgba(0,0,0,0.75));//漸變設置到100%的位置時停止 ctx.fillStyle = grd; ctx.beginPath(); //可去除邊框 ctx.fillRect(0,0,1364,1080); //不可去除邊框// ctx.rect(0,0,1364,1080);;// ctx.fill(); ctx.stroke(); } Component.onCompleted: { requestPaint(); } }}createLinearGradient()函數里面的參數分別是x,y,x1,y1，對此特意測試過，當x和x1相同時，實現的漸變是上下矩形形狀的漸變，同理y和y1相同時，實現的漸變是左右矩形形狀的漸變，當兩者都不相同的時候，實現的是對角線類型的漸變。
第二個就是onPaint信號的問題，Canvas提供paint信號，只有在發出requestPaint()信號的時候，才會調用onPaint的內容。
第三個就是繪出的圖形帶有邊框的問題，這個問題可以看上面的代碼的注釋部分，fillRect()與fill()，rect()函數之間的區別，個人理解是，fillRect()字面意思就是填充rect，而不是先畫出rect，再fill，是直接跳過畫rect，進行fill對應的rect區域
新聞熱點
疑難解答
