解决canvas画布使用fillRect()时高度出现双倍效果的问题

来源：懂视网责编：小采时间：2020-11-27 22:33:29

解决canvas画布使用fillRect()时高度出现双倍效果的问题

解决canvas画布使用fillRect()时高度出现双倍效果的问题:当设置canvas的宽度和高度时，只有内嵌css有效，外部css会出现拉伸的情况，例如： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title

推荐度：

点击下载本文 文档为doc格式

导读解决canvas画布使用fillRect()时高度出现双倍效果的问题:当设置canvas的宽度和高度时，只有内嵌css有效，外部css会出现拉伸的情况，例如： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title

当设置canvas的宽度和高度时，只有内嵌css有效，外部css会出现拉伸的情况，例如：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script>
 window.onload=function(){
 　　　　var canvas=document.getElementById('canvas').getContext('2d');
 　　　　canvas.fillRect(50,50,50,50);
 }
 </script>
 <style>
 body{
 　　　　background: #000;
 }
 #canvas{
 　　　　width: 300px;
 　　　　height: 400px;
 　　　　background:#fff;
 }
 </style>
</head>
<body>
 <canvas id="canvas">
 <span>不支持canvas标签</span>
 </canvas>
</body>
</html>

显示情况如下：

该效果与我们预想的不同，此时有两种修改方案：

(1) 在代码js中添加设置宽高属性的代码设置宽度和高度：

canvas.setAttribute("height",canvas.clientHeight);
canvas.setAttribute("width",canvas.clientWidth);

(2) 除去外部css中设置宽高属性的代码，给canvas标签直接添加宽度和高度属性：

<canvas id="canvas" width="300" height="400" >
 <span>不支持canvas标签</span>
</canvas>

最后显示效果如下：

以上这篇解决canvas画布使用fillRect()时高度出现双倍效果的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

解决canvas画布使用fillRect()时高度出现双倍效果的问题

推荐度：

点击下载本文 文档为doc格式

标签：效果 canvas canvas的

热门焦点

解决canvas画布使用fillRect()时高度出现双倍效果的问题

解决canvas画布使用fillRect()时高度出现双倍效果的问题

解决canvas画布使用fillRect()时高度出现双倍效果的问题

最新推荐

猜你喜欢

热门推荐