關於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" stylex="background:#fff;">
<span>不支持canvas標籤</span>
</canvas>
最後顯示效果如下:
※node調用phantomjs-node爬取複雜頁面
※SQL Server Alwayson創建代理作業注意事項
※Bean 的生命周期 之 後處理Bean
TAG:達人科技 |
※kali 使用apt-get update報錯GPG error的解決辦法
※Kanye West 已解決 Saint Pablo 巡演訴訟案
※Cadence Innovus助力Realtek成功開發DTV SoC解決方案
※Win7系統提示steam client not found解決方法
※Realtek藉助Cadence Innovus成功開發DTV SoC解決方案
※聯想、OPPO、vivo和小米分別與Qualcomm Technologies 簽署射頻前端解決方案跨年度採購諒解備忘錄
※Antycip Simulatio推出最新VR和3D沉浸式解決方案
※Bracco Imaging利用AR解決方案擴展產品組合
※HikariCP源碼分析之leakDetectionThreshold及實戰解決Spark/Scala連接池泄漏
※如何解決 「mount.nfs：Stale file handle」錯誤
※Kaon Interactive旨在針對行業用戶推出VR/AR解決方案
※VRstudios推出VR線下電競解決方案VRcade PowerPlay
※解決Electra越獄顯示Error：topanga錯誤的方法！
※Nordic Semiconductor推出支持nRF52840多協議SoC的ZigBee解決方案，拓展其智能家居應用產品
※殭屍毀滅工程steam is not enabled錯誤解決方法
※蘋果開始封堵Cydia Impactor工具？有解決辦法！
※解決SSD問題後，Windows 10似乎跟Avast Antivirus過不去
※Cydia Impactor工具82錯誤提示解決辦法！
※英偉達發布 Drive Constellation 自動駕駛模擬系統，解決路測距離瓶頸
※小米Pro/Air筆記本重裝系統教程及開機No Bootable Devices解決方案