解決canvas畫布使用fillRect()時(shí)高度出現(xiàn)雙倍效果的問題

更新時(shí)間：2017年08月03日 08:03:53 投稿：jingxian

下面小編就為大家?guī)硪黄鉀Qcanvas畫布使用fillRect()時(shí)高度出現(xiàn)雙倍效果的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

當(dāng)設(shè)置canvas的寬度和高度時(shí)，只有內(nèi)嵌css有效，外部css會出現(xiàn)拉伸的情況，例如：

<!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標(biāo)簽</span>
  </canvas>
</body>
</html>

顯示情況如下：

該效果與我們預(yù)想的不同，此時(shí)有兩種修改方案：

(1) 在代碼js中添加設(shè)置寬高屬性的代碼設(shè)置寬度和高度：

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

(2) 除去外部css中設(shè)置寬高屬性的代碼，給canvas標(biāo)簽直接添加寬度和高度屬性：

<canvas id="canvas" width="300" height="400" >
    <span>不支持canvas標(biāo)簽</span>
</canvas>

最后顯示效果如下：

以上這篇解決canvas畫布使用fillRect()時(shí)高度出現(xiàn)雙倍效果的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

移動端利用H5實(shí)現(xiàn)壓縮圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了移動端利用H5實(shí)現(xiàn)壓縮圖片上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
鼠標(biāo)移入移出事件改變圖片的分辨率的兩種方法
做一個鼠標(biāo)移入移出圖片事件，首先是改變分辨率的兩種方法，鼠標(biāo)移入圖片和移出圖片的分辨率不同，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下
2013-12-12
網(wǎng)頁與鍵盤
網(wǎng)頁與鍵盤...
2006-07-07
Bootstrap彈出框modal上層的輸入框不能獲得焦點(diǎn)問題的解決方法
這篇文章主要介紹了Bootstrap彈出框modal上層的輸入框不能獲得焦點(diǎn)問題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
JavaScript判斷頁面加載完之后再執(zhí)行預(yù)定函數(shù)的技巧
這篇文章主要介紹了JavaScript判斷頁面加載完之后再執(zhí)行預(yù)定函數(shù)的技巧,原理還是利用監(jiān)聽器監(jiān)聽元素事件、被觸發(fā)則執(zhí)行函數(shù),需要的朋友可以參考下
2016-05-05
解決typescript?提示?Object?is?possibly'null'的N種方案
這篇文章主要介紹了typescript?提示?Object?is?possibly?‘null‘?的N種解決方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-03-03
JavaScript的removeChild()函數(shù)用法詳解
removechild 函數(shù)可以刪除父元素的指定子元素，通過本文給大家介紹javascript的removeChild()函數(shù)用法，對js removechild函數(shù)相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
讓背景如此暗淡（一種彈出提示信息時(shí)頁面背景色調(diào)改變的方法）
讓背景如此暗淡（一種彈出提示信息時(shí)頁面背景色調(diào)改變的方法）...
2006-10-10
微信小程序排坑指南詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序排坑指南，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-05-05
JS實(shí)現(xiàn)簡單的鍵盤打字的效果
本文給大家分享的是使用javascript實(shí)現(xiàn)的簡單的鍵盤打字效果，十分的簡單實(shí)用，推薦給有需要的小伙伴參考下。
2015-04-04