首先设置画布和上下文(context)打开keyboard.html ,然后用一下代码替换第二个<script>中的代码。

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var width = canvas.width;

var height = canvas.height;

第一行我们用document.getElementById来选择画布,第二行在画布上掉用getContext获的上下文对象。接下来用画布的宽和高来设置变量width、height。通过这种方式,当我们需要用到画布的尺寸时只需要使用变量,而不用再去输入数字。现在如果要修改画布的大小,我们只需要修改html文件即可,javascrip代码依旧可以正常运行。