一般情况下，在使用canvas时，需要给定一个宽度和高度，一般是固定值。但是有时为了需求的需要，需要动态修改宽度和高度。下面利用具体的实例说明如何实现，操作如下：
工具/原料
1
CSS3
2
HTML5
3
HBuilder
4
浏览器
5
截图工具
方法/步骤
1
第一步，双击打开HBuilder工具，新建一个HTML5模板，修改title内容，如下图所示：
2
第二步，在
标签内，插入一个，并设置对应的ID值，如下图所示：3
第三步，利用ID选择器，设置canvas的宽度、高度和背景渐变属性，如下图所示：
4
第四步，再次在canvas元素下方添加一个按钮button，并插入一个点击事件，如下图所示：
5
第五步，利用按钮点击事件，动态设置canvas的宽度和高度，还有按钮的宽度，如下图所示：
6
第六步，保存代码并直接打开浏览器预览效果，并点击按钮查看效果，如下图所示：
注意事项
1
注意要想改变canvas宽度和高度，不能将宽度和高度固定
2
注意使用JavaScript方法动态设置宽度和高度
上一篇：如何设置a标签的高度