微信小程序实用案例代码片段大全《六》


TITF 出品:微信小程序实用案例代码片段大全《六》 一:使用画布组件绘制一个半径为 50px 的圆 关键代码 index.wxml 来自 CODE 的代码片 snippet_file_0.txt index.js 1 2 3 4 5 Page({ onReady:function(){ // 页面渲染完成 var cxt_arc=wx.createContext();//创建并返回绘图上下文 context 对象。 cxt_arc.beginPath();//开始一个新的路径 6 7 8 9 10 11 12 13 14 cxt_arc.arc(100,50,50,0,2*Math.PI,true);//设置一个原点(100,50),半径为为 50 的圆的路径到当前路径 cxt_arc.stroke();//对当前路径进行描边 cxt_arc.closePath();//关闭当前路径 wx.drawCanvas({ canvasId:'canvasArc',//画布标识,对应的 cavas-id actions:cxt_arc.getActions()//导出 context 绘制的直线并显示到页面 }) } }) 二:使用画布组件绘制一个会自动缩放的正方体 关键代码 index.wxml 1 empty 来自 CODE 的代码片 snippet_file_0.txt index.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Page({ onReady:function(e){ var cxt_scale = wx.createContext();//创建并返回绘图上下文 context 对象。 var scale=0;//默认缩放倍数为 0,大于 0 为放大,小于 0 位缩小 setInterval(function(){ //无限循环定时函数 scale+=0.5;// 向缩小后放大 if(scale==10){//但放大位数为 10 倍时,设置放大倍数为 1 scale=1 } cxt_scale.scale(scale,scale)//对横纵坐标进行缩放 cxt_scale.rect(0,0,10,10)//边长为为 10px 的正方形 cxt_scale.stroke();//对当前路径进行描边 wx.drawCanvas({ canvasId:'canvasAutoScale',//画布标识,对应的 cavas-id actions:cxt_scale.getActions()//导出 context 绘制的直线并显示到页面 16 17 18 19 }); },200) } }) 来自 CODE 的代码片 三:使用画布组件绘制一条长度为 230px 的水平直线 关键代码 index.wxml 1 empty 来自 CODE 的代码片 snippet_file_0.txt index.js 1 2 Page({ onReady:function(e){ 3 4 5 6 7 8 9 10 11 12 13 14 var cxt_scale = wx.createContext();//创建并返回绘图上下文 context 对象。 var scale=0;//默认缩放倍数为 0,大于 0 为放大,小于 0 位缩小 setInterval(function(){ //无限循环定时函数 scale+=0.5;// 向缩小后放大 if(scale==10){//但放大位数为 10 倍时,设置放大倍数为 1 scale=1 } cxt_scale.scale(scale,scale)//对横纵坐标进行缩放 cxt_scale.rect(0,0,10,10)//边长为为 10px 的正方形 cxt_scale.stroke();//对当前路径进行描边 wx.drawCanvas({ canvasId:'canvasAutoScale',//画布标识,对应的 cavas-id actions:cxt_scale.getActions()//导出 context 绘制的直线并显示到页面 }); },200) } }) 来自 CODE 的代码片 四:使用画布组件绘制一个长 200px,宽 100px 的长方形 关键代码 index.wxml 来自 CODE 的代码片 snippet_file_0.txt index.js 1 2 3 4 5 Page({ onReady:function(){ // 页面渲染完成 var ctxt_rect=wx.createContext();//创建并返回绘图上下文 context 对象。 ctxt_rect.beginPath();//开始一个新的路径 6 7 8 9 10 11 12 13 14 ctxt_rect.rect(10,10,200,100);//添加一个长度为 200px、宽度为为 100px 的矩形路径到当前路径 ctxt_rect.stroke();//对当前路径进行描边 ctxt_rect.closePath();//关闭当前路径 wx.drawCanvas({ canvasId:'canvasRect',//画布标识,对应的 cavas-id actions:ctxt_rect.getActions()//导出 context 绘制的矩形路径并显示到页面 }) } }) 来自 CODE 的代码片 五:使用画布组件绘制一个会自动旋转的正方体 关键代码 index.wxml 1 empty 来自 CODE 的代码片 snippet_file_0.txt index.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Page({ onReady:function(){ // 页面渲染完成 var ctxt_rect=wx.createContext();//创建并返回绘图上下文 context 对象。 ctxt_rect.beginPath();//开始一个新的路径 ctxt_rect.rect(10,10,200,100);//添加一个长度为 200px、宽度为为 100px 的矩形路径到当前路径 ctxt_rect.stroke();//对当前路径进行描边 ctxt_rect.closePath();//关闭当前路径 wx.drawCanvas({ canvasId:'canvasRect',//画布标识,对应的 cavas-id actions:ctxt_rect.getActions()//导出 context 绘制的矩形路径并显示到页面 }) } }) 15 16 17 来自 CODE 的代码片 六:使用画布组件绘制一个带阴影及下划线的文字 关键代码 index.wxml 1 empty 来自 CODE 的代码片 snippet_file_0.txt index.js 1 2 3 Page({ onReady:function(){ // 页面渲染完成 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var cxt_fillText = wx.createContext();//创建并返回绘图上下文 context 对象。 cxt_fillText.beginPath();//开始一个新的路径 cxt_fillText.setFontSize(60);//设置填充文本字体的大小 cxt_fillText.setLineWidth(6);//设置线条的宽度 cxt_fillText.setShadow(0,10,30,'#33ffff');//设置阴影 cxt_fillText.setStrokeStyle('#33ff66');//设置线条的样式 cxt_fillText.setFillStyle('#3300ff');//设置填充的样式 cxt_fillText.fillText(“TITF“,50,100);//设置填充文本 fillText()第一个值为显示的文本,第二个值为文本的 x 坐标,第三个值为文本的 y 坐标 cxt_fillText.moveTo(40,105);//设置线条的起始路径坐标 cxt_fillText.lineTo(180,105);//设置线条的终点路径坐标 cxt_fillText.stroke();//对当前路径进行描边 cxt_fillText.closePath();//关闭当前路径 wx.drawCanvas({ canvasId:'canvasFillText',//画布标识,对应的 cavas-id actions:cxt_fillText.getActions()//导出 context 绘制的直线并显示到页面 20 21 }) } }) 来自 CODE 的代码片
还剩10页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

rukezhang

贡献于2017-03-01

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf