这是微信开发者文档canvas旧版示例代码效果图,运用
wx.createCanvasContext('firstCanvas')
但是已经被弃用了,需要使用新的接口Canvas 2D,下面我们就用新街口改写旧版示例。
wxml代码:
<!--canvas组件-->
<canvas id="myCanvas" type="2d" style="margin:20rpx;width: 300px; height: 200px;" bindtouchstart="start" bindtouchmove="move" bindtouchend="end"/>
<!--通过canvas的start move end事件获取画布中的坐标点x y-->
<view hidden="{{hidden}}">
Coordinates: ({{x}}, {{y}})
</view>
js逻辑代码:
// pages/canvas/canvas.js
Page({
/**
* 页面的初始数据
*/
data: {
x: 0,
y: 0,
hidden: true
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
wx.createSelectorQuery()
.select('#myCanvas') // 在 WXML 中填入的 id
.fields({ node: true, size: true })
.exec((res) => {
// Canvas 对象
const canvas = res[0].node
// 渲染上下文
const ctx = canvas.getContext('2d')
// Canvas 画布的实际绘制宽高
const width = res[0].width
const height = res[0].height
// 初始化画布大小
const dpr = wx.getWindowInfo().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
// 清空画布
ctx.clearRect(0, 0, width, height)
//绘制方形
ctx.strokeStyle = "#00ff00";//路径颜色
ctx.lineWidth = 5;//路径宽度
ctx.rect(0,0,200,200);//方形区域
ctx.stroke();//开始绘制方形
//绘制圆形
//arc(x,y,r,sAngle,eAngle,counterclockwise)绘制圆形
// 参数
// x Number 圆的x坐标
// y Number 圆的y坐标
// r Number 圆的半径
// sAngle Number 起始弧度,单位弧度(在3点钟方向)
// eAngle Number 终止弧度
//counterclockwise Boolean 可选。指定弧度的方向是逆时针还是顺时针。默认是false,即顺时针。
ctx.strokeStyle = "#ff0000";
ctx.lineWidth = 2;
ctx.moveTo(160,100);//移动至坐标160 100
ctx.beginPath();//开始新路径
ctx.arc(100,100,60,0,2*Math.PI,true);
ctx.moveTo(140,100);
ctx.arc(100,100,40,0,Math.PI,false);
ctx.moveTo(85,80);
ctx.arc(80,80,5,0,2*Math.PI);
ctx.moveTo(125,80)
ctx.arc(120,80,5,0,2*Math.PI);
ctx.stroke();
})
},
start: function(e) {
this.setData({
hidden: false,
x: e.touches[0].x,
y: e.touches[0].y
})
},
move: function(e) {
this.setData({
x: e.touches[0].x,
y: e.touches[0].y
})
},
end: function(e) {
this.setData({
hidden: true
})
}
})