wx.createContext()
? 創建并返回繪圖上下文context對象。愛掏網 - it200.com
context
? context只是一個記錄方法調用的容器&＃xff0c;用于生成記錄繪制行為的actions數組。愛掏網 - it200.comcontext跟不存在對應關系&＃xff0c;一個context生成畫布的繪制動作數組可以應用于多個。愛掏網 - it200.com// 假設頁面上有3個畫布
var canvas1Id &＃61; 3001;
var canvas2Id &＃61; 3002;
var canvas3Id &＃61; 3003;
var context &＃61; wx.createContext();
[canvas1Id, canvas2Id, canvas3Id].forEach(function(id){
context.clearActions();
// 在context上調用方法
wx.drawCanvas({
canvasId: id,
actions: context.getActions();
});
});
context對象的方法列表&＃xff1a;方法 參數 說明getActions 無 獲取當前context上存儲的繪圖動作
clearActions 無 清空當前的存儲繪圖動作
變形
對橫縱坐標進行縮放
對坐標軸進行順時針旋轉
對坐標原點進行縮放
save 無 保存當前坐標軸的縮放、旋轉、平移信息
restore 無 恢復之前保存過的坐標軸的縮放、旋轉、平移信息
繪制
在給定的矩形區域內&＃xff0c;清除畫布上的像素
在畫布上繪制被填充的文本
fill 無 對當前路徑進行填充
stroke 無 對當前路徑進行描邊
路徑
把路徑移動到畫布中的指定點&＃xff0c;但不創建線條。愛掏網 - it200.com
添加一個新點&＃xff0c;然后在畫布中創建從該點到最后指定點的線條。愛掏網 - it200.com
添加一個矩形路徑到當前路徑。愛掏網 - it200.com
添加一個弧形路徑到當前路徑&＃xff0c;順時針繪制。愛掏網 - it200.com
樣式
方法詳解&＃xff1a;
scale
在調用scale()方法后&＃xff0c;之后創建的路徑其橫縱坐標會被縮放。愛掏網 - it200.com多次調用scale&＃xff0c;倍數會相乘。愛掏網 - it200.com參數 類型 范圍 說明scaleWidth Number 1&＃61;100%&＃xff0c;0.5&＃61;50%&＃xff0c;2&＃61;200%&＃xff0c;依次類推 橫坐標縮放的倍數
scaleHeight Number 1&＃61;100%&＃xff0c;0.5&＃61;50%&＃xff0c;2&＃61;200%&＃xff0c;依次類推 縱坐標軸縮放的倍數
示例代碼&＃xff1a;下載
//scale.js
Page({
onReady:function(e){
var context &＃61; wx.createContext();
context.rect(5,5,25,15)
context.stroke();
context.scale(2,2); //再放大2倍
context.rect(5,5,25,15);
context.stroke();
context.scale(2,2); //再放大2倍
context.rect(5,5,25,15)
context.stroke();
wx.drawCanvas({
canvasId:1,
actions:context.getActions()
});
}
})
rotate
以原點為中心&＃xff0c;原點可以用translate方法修改。愛掏網 - it200.com順時針旋轉當前坐標軸。愛掏網 - it200.com多次調用rotate&＃xff0c;旋轉的角度會疊加。愛掏網 - it200.com參數 類型 范圍 說明rotate Number degrees * Math.PI/180&＃xff1b;degrees范圍為0~360 旋轉角度&＃xff0c;以弧度計
示例代碼&＃xff1a;下載//rotate.js
Page({
onReady:function(e){
var context &＃61; wx.createContext();
context.rect(50,50,200,200)
context.stroke();
context.rotate(5*Math.PI/180)
context.rect(50,50,200,200)
context.stroke();
context.rotate(5*Math.PI/180)
context.rect(50,50,200,200)
context.stroke()
wx.drawCanvas({
canvasId:1,
actions:context.getActions()
});
}
})
translate
對當前坐標系的原點(0, 0)進行變換&＃xff0c;默認的坐標系原點為頁面左上角。愛掏網 - it200.com參數 類型 范圍 說明x Number 水平坐標平移量
y Number 豎直坐標平移量
示例代碼&＃xff1a;下載//translate.js
Page({
onReady:function(){
var context &＃61; wx.createContext();
context.rect(50,50,200,200)
context.stroke()
context.translate(50,50)
context.rect(50,50,200,200)
context.stroke();
wx.drawCanvas({
canvasId:1,
actions:context.getActions()
});
}
})
clearRect
清除畫布上在該矩形區域內的內容參數 類型 范圍 說明x Number 矩形區域左上角的x坐標
y Number 矩形區域左上角的y坐標
width Number 矩形區域的寬度
height Number 矩形區域的高度
示例代碼&＃xff1a;下載//clearrect.js
Page({
onReady:function(){
var context &＃61; wx.createContext();
context.rect(50,50,200,200)
context.fill()
context.clearRect(100,100,50,50)
wx.drawCanvas({
canvasId:1,
actions:context.getActions()
});
}
})
drawImage
繪制圖像&＃xff0c;圖像保持原始尺寸。愛掏網 - it200.com參數 類型 范圍 說明imageResource String 通過chooseImage得到一個文件路徑或者一個項目目錄內的圖片 所要繪制的圖片資源
x Number 圖像左上角的x坐標
y Number 圖像左上角的y坐標
示例&＃xff1a;下載//drawimage.js
Page({
onReady:function(e){
var context &＃61; wx.createContext();
wx.chooseImage({
success:function(res){
context.drawImage(res.tempFilePaths[0],0,0)
wx.drawCanvas({
canvasId:1,
actions:context.getActions()
});
}
})
}
})
fillText
在畫布上繪制被填充的文本。愛掏網 - it200.com參數 類型 范圍 說明text String 在畫布上輸出的文本
x Number 繪制文本的左上角x坐標位置
y Number 繪制文本的左上角y坐標位置
示例代碼&＃xff1a;下載//filltext.js
Page({
onReady:function(){
var context &＃61; wx.createContext();
context.setFontSize(14)
context.fillText("MINA",50,50)
context.moveTo(0,50)
context.lineTo(100,50)
context.stroke();
context.setFontSize(20)
context.fillText("MINA",100,100)
context.moveTo(0,100)
context.lineTo(200,100)
context.stroke();
wx.drawCanvas({
canvasId:1,
actions:context.getActions()
});
}
})
beginPath
開始創建一個路徑&＃xff0c;需要調用fill或者stroke才會使用路徑進行填充或描邊。愛掏網 - it200.com同一個路徑內的多次setFillStyle、setStrokeStyle、setLineWidth等設置&＃xff0c;以最后一次設置為準。愛掏網 - it200.com
closePage
關閉一個路徑。愛掏網 - it200.com
moveTo
把路徑移動到畫布中的指定點&＃xff0c;不創建線條。愛掏網 - it200.com參數 類型 范圍 說明x Number 目標位置的x坐標
y Number 目標位置的y坐標
lineTo
在當前位置添加一個新點&＃xff0c;然后在畫布中創建從該點到最后指定點的路徑。愛掏網 - it200.com參數 類型 范圍 說明x Number 目標位置的x坐標
y Number 目標位置的y坐標
rect
添加一個矩形路徑到當前路徑。愛掏網 - it200.com參數 類型 范圍 說明x Number 矩形路徑左上角的x坐標
y Number 矩形路徑左上角的y坐標
width Number 矩形路徑的寬度
height Number 矩形路徑的高度
arc
添加一個弧形路徑到當前路徑&＃xff0c;順時針繪制。愛掏網 - it200.com參數 類型 范圍 說明x Number 矩形路徑左上角的x坐標
y Number 矩形路徑左上角的y坐標
radius Number 矩形路徑的寬度
startAngle Number 弧度, 0到2pi 起始弧度
sweepAngle Number 弧度, 0到2pi 從起始弧度開始&＃xff0c;掃過的弧度
quadraticCurveTo
創建二次貝塞爾曲線路徑。愛掏網 - it200.com參數 類型 范圍 說明cpx Number 貝塞爾控制點的x坐標
cpy Number 貝塞爾控制點的y坐標
x Number 結束點的x坐標
y Number 結束點的y坐標
bezierCurveTo
創建三次方貝塞爾曲線路徑。愛掏網 - it200.com參數 類型 范圍 說明cp1x Number 第一個貝塞爾控制點的 x 坐標
cp1y Number 第一個貝塞爾控制點的 y 坐標
cp2x Number 第二個貝塞爾控制點的 x 坐標
cp2y Number 第二個貝塞爾控制點的 y 坐標
x Number 結束點的 x 坐標
y Number 結束點的 y 坐標
setFillStyle
設置純色填充。愛掏網 - it200.com
設置顏色為填充樣式參數 類型 范圍 說明color String &＃39;rgb(255, 0, 0)&＃39;或&＃39;rgba(255, 0, 0, 0.6)&＃39;或&＃39;#ff0000&＃39;格式的顏色字符串 設置為填充樣式的顏色
setStrokeStyle
? 設置純色描邊&＃xff0c;參數同setFillStyle。愛掏網 - it200.com
示例代碼&＃xff1a;下載//setfillstyle.js
Page({
onReady:function(e){
var context &＃61; wx.createContext();
context.setFillStyle("#ff00ff");
context.setStrokeStyle("#00ffff");
context.rect(50,50,100,100)
context.fill()
context.stroke()
wx.drawCanvas({
canvasId:1,
actions:context.getActions()
});
}
})
setShadow
設置陰影樣式。愛掏網 - it200.com參數 類型 范圍 說明offsetX Number 陰影相對于形狀在水平方向的偏移
offsetY Number 陰影相對于形狀在豎直方向的偏移
blur Number 0~100 陰影的模糊級別&＃xff0c;數值越大越模糊
color Color &＃39;rgb(255, 0, 0)&＃39;或&＃39;rgba(255, 0, 0, 0.6)&＃39;或&＃39;#ff0000&＃39;格式的顏色字符串 陰影的顏色
setFontSize
設置字體的字號。愛掏網 - it200.com參數 類型 范圍 說明fontSize Number 字體的字號
setLineWidth
設置線條的寬度。愛掏網 - it200.com參數 類型 范圍 說明lineWidth Number 線條的寬度
setLineCap
設置線條的結束端點樣式。愛掏網 - it200.com參數 類型 范圍 說明lineCap String &＃39;butt&＃39;、&＃39;round&＃39;、&＃39;square&＃39; 線條的結束端點樣式
setLineJoin
設置兩條線相交時&＃xff0c;所創建的拐角類型。愛掏網 - it200.com參數 類型 范圍 說明lineJoin String &＃39;bevel&＃39;、&＃39;round&＃39;、&＃39;miter&＃39; 兩條線相交時&＃xff0c;所創建的拐角類型
setMiterLimit
設置最大斜接長度&＃xff0c;斜接長度指的是在兩條線交匯處內角和外角之間的距離。愛掏網 - it200.com 當setLineJoin為&＃39;miter&＃39;時才有效。愛掏網 - it200.com超過最大傾斜長度的&＃xff0c;連接處將以lineJoin為bevel來顯示參數 類型 范圍 說明miterLimit Number 最大斜接長度
示例代碼&＃xff1a;下載//line.js
Page({
onReady:function(e){
var context &＃61; wx.createContext();
context.setLineWidth(10);
context.setLineCap("round")
context.setLineJoin("miter");
context.setMiterLimit(10);
context.moveTo(20,20);
context.lineTo(150,27);
context.lineTo(20,54);
context.stroke();
context.beginPath();
context.setMiterLimit(3);
context.moveTo(20,70);
context.lineTo(150,77);
context.lineTo(20,104);
context.stroke();
wx.drawCanvas({
canvasId:1,
actions:context.getActions()
});
}
})
wx.drawCanvas(OBJECT)
OBJECT參數說明&＃xff1a;參數 類型 必填 說明canvasId String 是 畫布標識&＃xff0c;傳入的cavas-id
actions Array 是 繪圖動作數組&＃xff0c;由wx.createContext創建的context&＃xff0c;調用getActions方法導出繪圖動作數組。愛掏網 - it200.com
示例&＃xff1a;下載
// index.js
Page({
canvasIdErrorCallback: function(e){
console.error(e.detail.errMsg);
},
onReady: function(e){
//使用wx.createContext獲取繪圖上下文context
var context &＃61; wx.createContext();
context.setStrokeStyle("#00ff00");
context.setLineWidth(5);
context.rect(0,0,200,200);
context.stroke()
context.setStrokeStyle ("#ff0000") ;
context.setLineWidth (2)
context.moveTo(160,100)
context.arc(100,100,60,0,2*Math.PI,true);
context.moveTo(140,100);
context.arc(100,100,40,0,Math.PI,false);
context.moveTo(85,80);
context.arc(80,80,5,0,2*Math.PI,true);
context.moveTo(125,80);
context.arc(120,80,5,0,2*Math.PI,true);
context.stroke();
//調用wx.drawCanvas&＃xff0c;通過canvasId指定在哪張畫布上繪制&＃xff0c;通過actions指定繪制行為
wx.drawCanvas({
canvasId: &＃39;firstCanvas&＃39;,
actions: context.getActions() //獲取繪圖動作數組
});
}
});