canvas 设置宽度、高度的问题

最新推荐文章于 2023-08-24 17:19:11 发布

_being_

最新推荐文章于 2023-08-24 17:19:11 发布

阅读量7.3k

点赞数

文章标签： canvas

Canvas元素默认宽 300px, 高 150px, 可以通过属性的方式设置，如果通过样式的方式设置会出现等比例拉伸的效果。

<!DOCTYPE html>
<html lang="en">
<body>
<canvas id="canvas1" style="width: 200px;height: 200px; border:1px solid black;">
</canvas>
<script>
    var oC = document.getElementById('canvas1');
    var ctx = oC.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 200);
    ctx.stroke();
</script>
</body>
</html>

结果如下：
canvas
通过样式来设置canvas的时候canvas的大小会被拉伸。

设置其宽高可以使用如下方法：
方法一：
<canvas width="500" height="500"></canvas>
方法二：使用HTML5 Canvas API操作

var canvas = document.getElementById('id');
canvas.width = 500;
canvas.width = 500;

若通过如下方法设置宽高，那么Canvas元素将由原来大小被拉伸到所设置的宽高：
方法一：使用CSS 会被拉伸

canvas｛
    width:1000px;
    height:1000px;
 ｝

也包含了行间样式中的 style=”” 。也就是上面的例子，也会产生拉伸的情况。

方法二：使用HTML5 Canvas API操作会被拉伸

 var canvas = document.getElementById('id');
 canvas.style.width = "1000px";
canvas.style.height = "1000px";

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

参考资料

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_being_

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
canvas 设置宽度、高度的问题

<!DOCTYPE html><html lang="en"><body><canvas id="canvas1" style="width: 200px;height: 200px; border:1px solid black;"></canvas><script> var oC = document.getElementById('canvas1'); var ctx
复制链接

扫一扫