用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 查看内容

TITF出品:微信小程序实用案例代码片段大全《四》

天下雪 2016-10-27 16:14

本文精选了TITF发布的代码片段的大量案例,已得到TITF的授权,若是想下载案例,请前往授权地址下载:http://blog.csdn.net/futruejet?viewmode=contents

一:使用画布组件绘制一个半径为50px的圆

关键代码

index.wxml

 1
<canvas style="width:300px; height:100px;" canvas-id="canvasArc"></canvas>
 来自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 cxt_arc=wx.createContext();//创建并返回绘图上下文context对象。
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(100,50,50,0,2*Math.PI,true);//设置一个原点(100,50),半径为为50的圆的路径到当前路径
cxt_arc.stroke();//对当前路径进行描边
cxt_arc.closePath();//关闭当前路径
wx.drawCanvas({
canvasId:'canvasArc',//画布标识,对应<canvas/>的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
 16
 17
 18
 19
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',//画布标识,对应<canvas/>的cavas-id
actions:cxt_scale.getActions()//导出context绘制的直线并显示到页面
});
},200)
}
})
 来自CODE的代码片

三:使用画布组件绘制一条长度为230px的水平直线
关键代码

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(e){
var context = wx.createContext();//创建并返回绘图上下文context对象。
context.beginPath();//开始一个新的路径
context.moveTo(30,40);//路径的起点
context.lineTo(260,40);//路径的终点
context.stroke();//对当前路径进行描边
context.closePath();//关闭当前路径
wx.drawCanvas({//
canvasId:'canvasLine',//画布标识,对应<canvas/>的cavas-id
actions:context.getActions()//导出context绘制的直线并显示到页面
});
}
})
 来自CODE的代码片

四:使用画布组件绘制一个长200px,宽100px的长方形

关键代码

index.wxml

 1
<canvas style="width:300px;height:200px;" canvas-id="canvasRect"></canvas>
 来自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',//画布标识,对应<canvas/>的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
 15
 16
 17
Page({
onReady:function(e){
var cxt_rotate = wx.createContext();//创建并返回绘图上下文context对象。
var rotate=0;//默认旋转角度为为0
setInterval(function(){ //无限循环定时函数
cxt_rotate.translate(150,100);//设置坐标系坐标
rotate++;//旋转角度自增1
cxt_rotate.rotate(rotate*Math.PI/180)//设置旋转的角度
cxt_rotate.rect(0,0,50,50)//设置坐标(0,0),相对于坐标系坐标,边长为为50px的正方形
cxt_rotate.stroke();//对当前路径进行描边
wx.drawCanvas({
canvasId:'canvasAutoRotate',//画布标识,对应<canvas/>的cavas-id
actions:cxt_rotate.getActions()//导出context绘制的直线并显示到页面
});
},1)
}
})
 来自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
 15
 16
 17
 18
 19
 20
 21
Page({
onReady:function(){
// 页面渲染完成
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',//画布标识,对应<canvas/>的cavas-id
actions:cxt_fillText.getActions()//导出context绘制的直线并显示到页面
})
}
})
 来自CODE的代码片


鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: FutrueJet 来自: 授权地址

相关阅读