开发工具上的效果:
代码:
onReady: function () {
const queryTwo = wx.createSelectorQuery()
queryTwo.select('#myCanvasTwo')
.fields({ node: true, size: true })
.exec((res) => {
console.log(res)
const canvas = res[0].node
var ctx = canvas.getContext('2d')
console.log(ctx)
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// 创建一个渐变
var gradient=ctx.createLinearGradient(0,0,canvas.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 填充一个渐变
ctx.fillStyle=gradient;
ctx.fillText("Big smile!",10,90);
// ctx.restore();
ctx.save();
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({ node: true, size: true })
.exec((res) => {
console.log(res)
const canvas1 = res[0].node
const ctx1 = canvas1.getContext('2d')
console.log(ctx1)
const dpr = wx.getSystemInfoSync().pixelRatio
canvas1.width = res[0].width * dpr
canvas1.height = res[0].height * dpr
console.log(dpr)
console.log(ctx1)
console.log(canvas1.width)
console.log(canvas1.height)
console.log(ctx.canvas)
// ctx1.scale(dpr, dpr)
ctx1.drawImage(ctx.canvas,0,0)
})
})
},
开发工具上日志:
############################################
真机预览效果:真机上的日志,canvas的对象的属性少了
canvas 2d暂不支持真机,请使用预览模式