Vue.js 绘制画布大小时，画布大小不同

你能告诉我如何解决这个问题吗：画布有1200x700px，但绘图的比例是300x150

导出默认值{
名称：“HelloWorld”，
数据（）{
返回{
msg:“欢迎使用您的Vue.js应用程序”，
vueCanvas:null，
像素：空
}
},
方法：{
鼠标：功能（事件）{
this.vueCanvas.putImageData（this.pixel、event.offsetX、event.offsetY）
this.msg=event.offsetX+“：”+event.offsetY
},
init：函数（）{
this.vueCanvas=document.getElementById（“c”）.getContext（“2d”）；
this.pixel=this.vueCanvas.createImageData（1,1）；
this.pixel.data[3]=255；
}
},
安装的（）{
this.init（）
}
}
#c{
高度：700px；
宽度：1200px；
边框：1px纯色灰色；
}

片段：

newvue({
el:“应用程序”，
数据（）{
返回{
msg:“欢迎使用您的Vue.js应用程序”，
vueCanvas:null，
像素：空，
};
},
方法：{
鼠标：功能（事件）{
this.vueCanvas.putImageData（this.pixel，event.offsetX，event.offsetY）；
this.msg=event.offsetX+'：'+event.offsetY；
},
init:function（）{
this.vueCanvas=document.getElementById（'c'）.getContext（'2d'）；
this.pixel=this.vueCanvas.createImageData（1,1）；
this.pixel.data[3]=255；
},
},
安装的（）{
this.init（）；
},
})

#c{
高度：700px；
宽度：1200px；
边框：1px纯色灰色；
}

我找到了解决方案：

this.vueCanvas.canvas.width=this.vueCanvas.canvas.clientWidth //300->1200
this.vueCanvas.canvas.height=this.vueCanvas.canvas.clientHeight //150->700

但我不确定这是否是一种良好的做法。

我找到了解决方案：

this.vueCanvas.canvas.width=this.vueCanvas.canvas.clientWidth //300->1200
this.vueCanvas.canvas.height=this.vueCanvas.canvas.clientHeight //150->700

---

但我不确定这是否是一种良好的做法。

这就是我在评论中的意思：

newvue({
el:“应用程序”，
数据（）{
返回{
msg:“欢迎使用您的Vue.js应用程序”，
vueCanvas:null，
像素：空，
};
},
方法：{
鼠标：功能（事件）{
this.vueCanvas.putImageData（this.pixel，event.offsetX，event.offsetY）；
this.msg=event.offsetX+'：'+event.offsetY；
},
init:function（）{
this.vueCanvas=document.getElementById（'c'）.getContext（'2d'）；
this.pixel=this.vueCanvas.createImageData（1,1）；
this.pixel.data[3]=255；
},
},
安装的（）{
this.init（）；
},
})

#c{
边框：1px纯色灰色；
}

这就是我在评论中的意思：

newvue({
el:“应用程序”，
数据（）{
返回{
msg:“欢迎使用您的Vue.js应用程序”，
vueCanvas:null，
像素：空，
};
},
方法：{
鼠标：功能（事件）{
this.vueCanvas.putImageData（this.pixel，event.offsetX，event.offsetY）；
this.msg=event.offsetX+'：'+event.offsetY；
},
init:function（）{
this.vueCanvas=document.getElementById（'c'）.getContext（'2d'）；
this.pixel=this.vueCanvas.createImageData（1,1）；
this.pixel.data[3]=255；
},
},
安装的（）{
this.init（）；
},
})

#c{
边框：1px纯色灰色；
}

尝试在元素本身上设置它：

它不工作：（尝试在元素本身上设置它：

它不工作：(