关键代码
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绘制的直线并显示到页面
})
}
})
|
