一区二区日本_久久久久久久国产精品_无码国模国产在线观看_久久99深爱久久99精品_亚洲一区二区三区四区五区午夜_日本在线观看一区二区

style對象微信小程序_微信小程序API繪圖

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() //獲取繪圖動作數組

});

}

});



聲明：所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益，可聯系我們進行處理。
發表評論
更多 網友評論 （0 條評論）
暫無評論

返回頂部
主站蜘蛛池模板： 欧美性受xxx | 国产成人精品久久二区二区91 | 波多野结衣中文视频 | 日韩在线观看一区 | 夜夜爆操| 色婷婷激情 | 小h片免费观看久久久久 | 中文av网站 | 欧美做暖暖视频 | 亚洲电影免费 | 成人午夜免费在线视频 | 成人国产精品一级毛片视频毛片 | 国产日韩欧美一区 | 日韩精品一区二区久久 | 亚洲精品性视频 | 一级毛片,一级毛片 | 亚洲在线一区二区 | 久久激情视频 | 蜜桃av人人夜夜澡人人爽 | 久久久久久久一区 | 亚洲一区二区三区四区五区午夜 | 国产成人免费视频网站高清观看视频 | 日中文字幕在线 | 亚洲日本国产 | 99精品久久99久久久久 | 国产日韩精品在线 | 久久久久久国产精品免费 | 中文字幕乱码一区二区三区 | 伊人春色在线观看 | 精品91| 91在线精品视频 | 一区免费看| 伊人狠狠| 日一区二区 | 男女久久久 | 天天曰夜夜 | 成人精品系列 | 男女搞网站 | 一二三区视频 | 欧美日韩在线精品 | 久久天堂网 |