.js
onReady() {
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
this.setData({
canvas: canvas
ctx: ctx
})
})
},
.js
draw_image(){
var canvas = this.data.canvas //canvas为获取的canvas对象
var ctx = this.data.ctx //ctx为获取的CanvasRenderingContext2D 对象
var img = canvas.createImage()
img.src = 'http://'
img.onload = () =>{
ctx.drawImage(img,0,0,200,200) //参数1:图片对象,参数2:绘制位置x,参数3:绘制位置y,参数4:图片宽度,参数5:图片高度
}
}
.js
draw_text(){
var ctx = this.data.ctx //ctx为获取的CanvasRenderingContext2D 对象
ctx.font = 'italic bold 30px Arial' //设置文字样式,包含斜体、加粗、字号、字体等
ctx.fillStyle = 'red' //设置文字颜色
ctx.fillText('绘制文字',0,100,1000) //参数1:绘制文本,参数2:绘制位置x,参数3:绘制位置y,参数4(可选):绘制文本的最大宽度
}
.js
//绘制矩形边框
draw_rect_stroke(){
ctx = this.data.ctx //ctx为获取的CanvasRenderingContext2D 对象
ctx.strokeStyle = 'red' //边框颜色
ctx.lineWidth = 5 //边框宽度
ctx.strokeRect(0,0,100,100) //参数1:绘制位置x,参数2:绘制位置y,参数3:矩形宽度,参数4:矩形高度
}
//绘制矩形填充
draw_rect_fill(){
ctx = this.data.ctx //ctx为获取的CanvasRenderingContext2D 对象
ctx.fillStyle = 'red' //填充颜色
ctx.fillRect(0,0,100,100) //参数1:绘制位置x,参数2:绘制位置y,参数3:矩形宽度,参数4:矩形高度
}
.js
//绘制椭圆边框
draw_ellipse_stroke(){
var ctx = this.data.ctx //ctx为获取的CanvasRenderingContext2D 对象
ctx.lineWidth=100
ctx.strokeStyle="black"
ctx.beginPath()
ctx.ellipse(80,80,50,50,0,0,Math.PI*2)
/*
参数1:圆心位置x
参数2:圆心位置y
参数3:长轴长度
参数4:短轴长度
参数5:旋转弧度
参数6:开始弧度
参数7:结束弧度
长轴和短轴相等,开始弧度=0,结束弧度=Math.PI*2,绘制图形为圆形
*/
ctx.stroke()
}
//绘制椭圆填充
draw_ellipse_fill(){
var ctx = this.data.ctx //ctx为获取的CanvasRenderingContext2D 对象
ctx.fillStyle="black"
ctx.beginPath()
ctx.ellipse(80,80,50,50,0,0,Math.PI*2)
/*
参数1:圆心位置x
参数2:圆心位置y
参数3:长轴长度
参数4:短轴长度
参数5:旋转弧度
参数6:开始弧度
参数7:结束弧度
长轴和短轴相等,开始弧度=0,结束弧度=Math.PI*2,绘制图形为圆形
*/
ctx.fill()
}
.js
draw_line(){
var ctx = this.data.ctx //ctx为获取的CanvasRenderingContext2D 对象
ctx.strokeStyle = "black" //直线颜色
ctx.lineWidth = 100 //直线宽度
ctx.beginPath()
ctx.moveTo(50,10) //参数1:开始位置x,参数2:开始位置y
ctx.lineTo(50,110) //参数1:结束位置x,参数2:结束位置y
ctx.closePath()
ctx.stroke()
}
更多内容请关注博主,微信小程序功能定制或咨询请私信博主。