且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

关于HTML5中Canvas的宽、高设置有关问题

更新时间:2022-08-21 22:08:44

关于HTML5中Canvas的宽、高设置问题


Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法:
方法一:
1 <canvas width="500" height="500"></canvas>
方法二:使用HTML5 Canvas API操作 OK
1 var canvas = document.getElementById('欲操作canvas的id');
2 canvas.width = 500;
3 canvas.width = 500;
若通过如下方法设置宽高,那么Canvas元素将由原来大小被拉伸到所设置的宽高:
方法一:使用CSS 会被拉伸
1 #欲操作canvas的id{
2     width:1000px;
3     height:1000px;
4 }
方法二:使用HTML5 Canvas API操作 会被拉伸
1 var canvas = document.getElementById('欲操作canvas的id');
2 canvas.style.width = "1000px";
3 canvas.style.height = "1000px";
方法三 :用jquery的$("#id").width(500);会被拉伸 

其它:canvas的width和height也不能用百分比表示。canvas会将百分值当成数值显示