wx.createContext()
? 創(chuàng)建并返回繪圖上下文context對(duì)象。愛掏網(wǎng) - it200.com
context
? context只是一個(gè)記錄方法調(diào)用的容器&＃xff0c;用于生成記錄繪制行為的actions數(shù)組。愛掏網(wǎng) - it200.comcontext跟不存在對(duì)應(yīng)關(guān)系&＃xff0c;一個(gè)context生成畫布的繪制動(dòng)作數(shù)組可以應(yīng)用于多個(gè)。愛掏網(wǎng) - it200.com// 假設(shè)頁(yè)面上有3個(gè)畫布
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上調(diào)用方法
wx.drawCanvas({
canvasId: id,
actions: context.getActions();
});
});
context對(duì)象的方法列表&＃xff1a;方法 參數(shù) 說(shuō)明getActions 無(wú) 獲取當(dāng)前context上存儲(chǔ)的繪圖動(dòng)作
clearActions 無(wú) 清空當(dāng)前的存儲(chǔ)繪圖動(dòng)作
變形
對(duì)橫縱坐標(biāo)進(jìn)行縮放
對(duì)坐標(biāo)軸進(jìn)行順時(shí)針旋轉(zhuǎn)
對(duì)坐標(biāo)原點(diǎn)進(jìn)行縮放
save 無(wú) 保存當(dāng)前坐標(biāo)軸的縮放、旋轉(zhuǎn)、平移信息
restore 無(wú) 恢復(fù)之前保存過(guò)的坐標(biāo)軸的縮放、旋轉(zhuǎn)、平移信息
繪制
在給定的矩形區(qū)域內(nèi)&＃xff0c;清除畫布上的像素
在畫布上繪制被填充的文本
fill 無(wú) 對(duì)當(dāng)前路徑進(jìn)行填充
stroke 無(wú) 對(duì)當(dāng)前路徑進(jìn)行描邊
路徑
把路徑移動(dòng)到畫布中的指定點(diǎn)&＃xff0c;但不創(chuàng)建線條。愛掏網(wǎng) - it200.com
添加一個(gè)新點(diǎn)&＃xff0c;然后在畫布中創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條。愛掏網(wǎng) - it200.com
添加一個(gè)矩形路徑到當(dāng)前路徑。愛掏網(wǎng) - it200.com
添加一個(gè)弧形路徑到當(dāng)前路徑&＃xff0c;順時(shí)針繪制。愛掏網(wǎng) - it200.com
樣式
方法詳解&＃xff1a;
scale
在調(diào)用scale()方法后&＃xff0c;之后創(chuàng)建的路徑其橫縱坐標(biāo)會(huì)被縮放。愛掏網(wǎng) - it200.com多次調(diào)用scale&＃xff0c;倍數(shù)會(huì)相乘。愛掏網(wǎng) - it200.com參數(shù) 類型 范圍 說(shuō)明scaleWidth Number 1&＃61;100%&＃xff0c;0.5&＃61;50%&＃xff0c;2&＃61;200%&＃xff0c;依次類推 橫坐標(biāo)縮放的倍數(shù)
scaleHeight Number 1&＃61;100%&＃xff0c;0.5&＃61;50%&＃xff0c;2&＃61;200%&＃xff0c;依次類推 縱坐標(biāo)軸縮放的倍數(shù)
示例代碼&＃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
以原點(diǎn)為中心&＃xff0c;原點(diǎn)可以用translate方法修改。愛掏網(wǎng) - it200.com順時(shí)針旋轉(zhuǎn)當(dāng)前坐標(biāo)軸。愛掏網(wǎng) - it200.com多次調(diào)用rotate&＃xff0c;旋轉(zhuǎn)的角度會(huì)疊加。愛掏網(wǎng) - it200.com參數(shù) 類型 范圍 說(shuō)明rotate Number degrees * Math.PI/180&＃xff1b;degrees范圍為0~360 旋轉(zhuǎn)角度&＃xff0c;以弧度計(jì)
示例代碼&＃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
對(duì)當(dāng)前坐標(biāo)系的原點(diǎn)(0, 0)進(jìn)行變換&＃xff0c;默認(rèn)的坐標(biāo)系原點(diǎn)為頁(yè)面左上角。愛掏網(wǎng) - it200.com參數(shù) 類型 范圍 說(shuō)明x Number 水平坐標(biāo)平移量
y Number 豎直坐標(biāo)平移量
示例代碼&＃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
清除畫布上在該矩形區(qū)域內(nèi)的內(nèi)容參數(shù) 類型 范圍 說(shuō)明x Number 矩形區(qū)域左上角的x坐標(biāo)
y Number 矩形區(qū)域左上角的y坐標(biāo)
width Number 矩形區(qū)域的寬度
height Number 矩形區(qū)域的高度
示例代碼&＃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;圖像保持原始尺寸。愛掏網(wǎng) - it200.com參數(shù) 類型 范圍 說(shuō)明imageResource String 通過(guò)chooseImage得到一個(gè)文件路徑或者一個(gè)項(xiàng)目目錄內(nèi)的圖片 所要繪制的圖片資源
x Number 圖像左上角的x坐標(biāo)
y Number 圖像左上角的y坐標(biāo)
示例&＃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
在畫布上繪制被填充的文本。愛掏網(wǎng) - it200.com參數(shù) 類型 范圍 說(shuō)明text String 在畫布上輸出的文本
x Number 繪制文本的左上角x坐標(biāo)位置
y Number 繪制文本的左上角y坐標(biāo)位置
示例代碼&＃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
開始創(chuàng)建一個(gè)路徑&＃xff0c;需要調(diào)用fill或者stroke才會(huì)使用路徑進(jìn)行填充或描邊。愛掏網(wǎng) - it200.com同一個(gè)路徑內(nèi)的多次setFillStyle、setStrokeStyle、setLineWidth等設(shè)置&＃xff0c;以最后一次設(shè)置為準(zhǔn)。愛掏網(wǎng) - it200.com
closePage
關(guān)閉一個(gè)路徑。愛掏網(wǎng) - it200.com
moveTo
把路徑移動(dòng)到畫布中的指定點(diǎn)&＃xff0c;不創(chuàng)建線條。愛掏網(wǎng) - it200.com參數(shù) 類型 范圍 說(shuō)明x Number 目標(biāo)位置的x坐標(biāo)
y Number 目標(biāo)位置的y坐標(biāo)
lineTo
在當(dāng)前位置添加一個(gè)新點(diǎn)&＃xff0c;然后在畫布中創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的路徑。愛掏網(wǎng) - it200.com參數(shù) 類型 范圍 說(shuō)明x Number 目標(biāo)位置的x坐標(biāo)
y Number 目標(biāo)位置的y坐標(biāo)
rect
添加一個(gè)矩形路徑到當(dāng)前路徑。愛掏網(wǎng) - it200.com參數(shù) 類型 范圍 說(shuō)明x Number 矩形路徑左上角的x坐標(biāo)
y Number 矩形路徑左上角的y坐標(biāo)
width Number 矩形路徑的寬度
height Number 矩形路徑的高度
arc
添加一個(gè)弧形路徑到當(dāng)前路徑&＃xff0c;順時(shí)針繪制。愛掏網(wǎng) - it200.com參數(shù) 類型 范圍 說(shuō)明x Number 矩形路徑左上角的x坐標(biāo)
y Number 矩形路徑左上角的y坐標(biāo)
radius Number 矩形路徑的寬度
startAngle Number 弧度, 0到2pi 起始弧度
sweepAngle Number 弧度, 0到2pi 從起始弧度開始&＃xff0c;掃過(guò)的弧度
quadraticCurveTo
創(chuàng)建二次貝塞爾曲線路徑。愛掏網(wǎng) - it200.com參數(shù) 類型 范圍 說(shuō)明cpx Number 貝塞爾控制點(diǎn)的x坐標(biāo)
cpy Number 貝塞爾控制點(diǎn)的y坐標(biāo)
x Number 結(jié)束點(diǎn)的x坐標(biāo)
y Number 結(jié)束點(diǎn)的y坐標(biāo)
bezierCurveTo
創(chuàng)建三次方貝塞爾曲線路徑。愛掏網(wǎng) - it200.com參數(shù) 類型 范圍 說(shuō)明cp1x Number 第一個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo)
cp1y Number 第一個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo)
cp2x Number 第二個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo)
cp2y Number 第二個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo)
x Number 結(jié)束點(diǎn)的 x 坐標(biāo)
y Number 結(jié)束點(diǎn)的 y 坐標(biāo)
setFillStyle
設(shè)置純色填充。愛掏網(wǎng) - it200.com
設(shè)置顏色為填充樣式參數(shù) 類型 范圍 說(shuō)明color String &＃39;rgb(255, 0, 0)&＃39;或&＃39;rgba(255, 0, 0, 0.6)&＃39;或&＃39;#ff0000&＃39;格式的顏色字符串 設(shè)置為填充樣式的顏色
setStrokeStyle
? 設(shè)置純色描邊&＃xff0c;參數(shù)同setFillStyle。愛掏網(wǎng) - 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
設(shè)置陰影樣式。愛掏網(wǎng) - it200.com參數(shù) 類型 范圍 說(shuō)明offsetX Number 陰影相對(duì)于形狀在水平方向的偏移
offsetY Number 陰影相對(duì)于形狀在豎直方向的偏移
blur Number 0~100 陰影的模糊級(jí)別&＃xff0c;數(shù)值越大越模糊
color Color &＃39;rgb(255, 0, 0)&＃39;或&＃39;rgba(255, 0, 0, 0.6)&＃39;或&＃39;#ff0000&＃39;格式的顏色字符串 陰影的顏色
setFontSize
設(shè)置字體的字號(hào)。愛掏網(wǎng) - it200.com參數(shù) 類型 范圍 說(shuō)明fontSize Number 字體的字號(hào)
setLineWidth
設(shè)置線條的寬度。愛掏網(wǎng) - it200.com參數(shù) 類型 范圍 說(shuō)明lineWidth Number 線條的寬度
setLineCap
設(shè)置線條的結(jié)束端點(diǎn)樣式。愛掏網(wǎng) - it200.com參數(shù) 類型 范圍 說(shuō)明lineCap String &＃39;butt&＃39;、&＃39;round&＃39;、&＃39;square&＃39; 線條的結(jié)束端點(diǎn)樣式
setLineJoin
設(shè)置兩條線相交時(shí)&＃xff0c;所創(chuàng)建的拐角類型。愛掏網(wǎng) - it200.com參數(shù) 類型 范圍 說(shuō)明lineJoin String &＃39;bevel&＃39;、&＃39;round&＃39;、&＃39;miter&＃39; 兩條線相交時(shí)&＃xff0c;所創(chuàng)建的拐角類型
setMiterLimit
設(shè)置最大斜接長(zhǎng)度&＃xff0c;斜接長(zhǎng)度指的是在兩條線交匯處內(nèi)角和外角之間的距離。愛掏網(wǎng) - it200.com 當(dāng)setLineJoin為&＃39;miter&＃39;時(shí)才有效。愛掏網(wǎng) - it200.com超過(guò)最大傾斜長(zhǎng)度的&＃xff0c;連接處將以lineJoin為bevel來(lái)顯示參數(shù) 類型 范圍 說(shuō)明miterLimit Number 最大斜接長(zhǎng)度
示例代碼&＃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參數(shù)說(shuō)明&＃xff1a;參數(shù) 類型 必填 說(shuō)明canvasId String 是 畫布標(biāo)識(shí)&＃xff0c;傳入的cavas-id
actions Array 是 繪圖動(dòng)作數(shù)組&＃xff0c;由wx.createContext創(chuàng)建的context&＃xff0c;調(diào)用getActions方法導(dǎo)出繪圖動(dòng)作數(shù)組。愛掏網(wǎng) - 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();
//調(diào)用wx.drawCanvas&＃xff0c;通過(guò)canvasId指定在哪張畫布上繪制&＃xff0c;通過(guò)actions指定繪制行為
wx.drawCanvas({
canvasId: &＃39;firstCanvas&＃39;,
actions: context.getActions() //獲取繪圖動(dòng)作數(shù)組
});
}
});