                        課程
                    
                        /前端開發
                        
                            /Html5
                        
                        /Canvas玩轉圖像處理

Uncaught ReferenceError: cnavasa is not defined

var imagedate=contexta.getImageData(0,0,canvasa.width,cnavasa.height);為什么會報錯求解

現實PK理想

2015-09-24

源自：Canvas玩轉圖像處理 4-1

關注問題我要回答

3779

操作

收起

3 回答

杜新明
2016-11-24

在本機搭建的web服務器環境下運行

0 回復有任何疑惑可以回復我~

收起回答

現實PK理想提問者
2015-09-25

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">

</style>
</head>

<body>
<div style="margin: 20px auto; width:1700px;">
??????? <canvas id="canvasa" width="800" height="560" style="display:block;float:left;border:1px solid #aaa;">
??????? </canvas>

??????? <canvas id="canvasb" width="800" height="560" style="display:block;float:right;border:1px solid #aaa;">
??????? </canvas>
</div>
??? <a href="javascript:filter()">filter</a>
??? <script language="javascript">
??? var canvasa=document.getElementById("canvasa");
?? ?var contexta=canvasa.getContext("2d");
?? ?
?? ?var canvasb=document.getElementById("canvasb");
?? ?var contextb=canvasb.getContext("2d");
?? ?var img=new Image()
?? ?window.onload=function(){
?? ??? ?img.src="css精美案列/55d4263e00019bed00000000/canvas-image/05-image-filter/autumn.jpg";
?? ??? ?img.onload=function(){
?? ??? ??? ?contexta.drawImage(img,0,0,canvasa.width,canvasa.height);
?? ??? ??? ?}
?? ??? ?}
?? ?function filter(){

//下面這句話一直報錯原因是未能執行“getImageData”“CanvasRenderingContext2D“，

?? ??? ???? var imagedata=contexta.getImageData(0,0,canvasa.width,canvasa.height);

?? ??? ??? ???? contextb.putImageData(imagedata,0,0,0,0,canvasb.height,canvasb.width);
?? ??? ??? ??? ? console.log("ok");
?? ??? ??? ?}
??? </script>
</body>
</html>