使用wpaint繪圖軟件時：Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
一、總結
一句話總結：通過刪除法和最簡單模式找錯，發現是style="display: none;"這個位置引發的錯誤
1 <div class="student_note_type_item" id="student_note_type_picture1" style="display: none;"> 2 {include file="common/wpaint" /} 3 </div>
1、Uncaught DOMException表示什么？
Uncaught DOMException表明未獲取dom元素
2、排查錯誤的方法？
刪除法：刪除法刪除代碼以方便找到沖突代碼
（因為有些情況下是好的，多了代碼就出錯，哪肯定是多的代碼的問題）
最簡單模式：查看最簡單模式下是不是好的，如果是，逐步增加代碼查找沖突源
3、使用wpaint繪圖軟件時：Uncaught DOMException出錯的教訓是什么？
給外部插件加的樣式也很有可能是外部插件出錯的原因
就是外部插件出錯，不僅可能是js錯誤，css錯誤也非常常見
二、Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D'：
問題：
Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D'：The HTMLImageElement provided is in the 'broken' state.
分析：
Uncaught DOMException表明未獲取dom元素
The HTMLImageElement provided is in the 'broken' state.表明元素在獲取過程中被中斷了，也即元素可能沒有正確獲取
圖片路徑不正確導致圖片未正確獲取也將導致該錯誤
代碼：
HTML文件
<!DOCTYPE>
<html>
<head>
<mata name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
<div>
<canvas id="start" width="800" height="600">
</canvas>
</div>
<img src="./img/girl.jpg" id="img" style="display:none"/> <!--正確路徑-->
<script type="text/javascript" src="js/commonFunctions.js"></script>
<script type="text/javascript" src="js/star.js"></script>
</body>
</html>start.js:
var can;
var ctx;
var width;
var height;
var imgGirl=new Image();
// $(document).ready(function(){
// init();
// })
document.body.onload=init;
function init(){
can=document.getElementById("start");
ctx=can.getContext("2d");
width=can.width;
height=can.height;
imgGirl.src="../img/girl.jpg"//注意文件路徑 正確路徑為：./img/girl.jpg
gameLoop();
}
function drawBg(){
ctx.fillStyle="#393550";
ctx.fillRect(0,0,width,height);
}
/** [gameLoop 刷新畫布] */
function gameLoop(){
window.requestAnimFrame(gameLoop);
drawBg();
drawImg();
}
//根據設備性能進行調用
function drawImg(){
// star.js:39 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D':
// The HTMLImageElement provided is in the 'broken' state.
// 分析：Uncaught DOMException表明未獲取dom元素
// The HTMLImageElement provided is in the 'broken' state.表明元素在獲取過程中被中斷了，也即元素可能還在加載中
ctx.drawImage(imgGirl,100,100)
}解決辦法：
先判斷圖片路徑在js中是否正確：
在html中添加img標簽，通過js賦值看是否可以正常顯示，若可以則路徑正確
參考：Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D'： - CSDN博客
https://blog.csdn.net/tjj3027/article/details/78914071
https://blog.csdn.net/tjj3027/article/details/78914071
三、使用wpaint繪圖軟件時：Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
通過刪除法和最簡單模式逐步縮小錯誤代碼范圍找錯，發現是style="display: none;"這個位置引發的錯誤
1 <div class="student_note_type_item" id="student_note_type_picture1" style="display: none;"> 2 {include file="common/wpaint" /} 3 </div>
{include file="common/wpaint" /}里面是wpaint