解决canvas画布使用fillRect()时高度出现双倍效果的问题
更新时间：2017年08月03日 08:03:53 投稿：jingxian
下面小编就为大家带来一篇解决canvas画布使用fillRect()时高度出现双倍效果的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
当设置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()时高度出现双倍效果的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
那么今天我就用JavaScript代码来实现这个效果吧，那么首先介绍一下整个的思路，首先我们先将确定输入密码的位数，我的需求是5位，那么就用一个div标签包住5个input标签2015-12-12
在使用JavaScript脚本获取元素的尺寸时，有几个属性你需要弄清楚，不然会很棘手。2011-09-09
在程序设计中有很多实用的设计模式，而其中大部分语言的实现都是基于“类”。在程序设计中有很多实用的设计模式，而其中大部分语言的实现都是基于“类”。，本文将总结了JavaScript中常见的十五种设计模式，感兴趣的朋友可以参考下2023-05-05
JavaScript数组问题多种方法小结，众多blueidea高手联袂打造2008-07-07
我们来学习一种名为图像预装载（image preloading）的小技巧来提高图像访问速度，一些浏览器试图通过在本地缓存中保存这些图片来解决此问题，感兴趣的朋友可以了解下2013-03-03
日常我们在开发小程序的时候，总是希望把数据提交回数据库进行存储，那在小程序中该如何访问数据库呢？本篇我们就介绍一下具体的思路2022-08-08
javascript中setTimeout和setInterval的unref()和ref()用法示例
本文通过一个小例子想大家讲解了setTimeout和setInterval的unref()和ref()用法和使用环境，代码很简洁，有需要的小伙伴自己参考下吧。2014-11-11
这篇文章主要为大家详细介绍了Bootstrap面板（Panels）的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
FileReader具体支持哪些方法和事件，这里就不介绍了，有兴趣的可以去w3c官网上看看FileReader介绍，这里主要介绍一下FileReader常见应用，以及fileReader 实现上传图片示例分享。2015-01-01
javascript table排序 这个更简单了，不用改变现在的表格结构
另外一个table排序，这个更简单了，不用改变现在的表格结构,来自国外的代码。2010-04-04
最新评论