我的代码不知道哪儿错了~-慕课网

我的代码不知道哪儿错了~

来源：8-2 globalAlpha和globalCompositeOperation

qq_悄悄_0

2016-07-04 17:59

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           #buttons{margin:50px 10%;}
           #buttons a{margin-top:50px;margin-right:10px;text-decoration:none;font-size:20px;color:black;padding:5px;border:1px solid black;}
       </style>
   </head>
   <body>
       <canvas id="canvas" height="800" width="1200" style="margin: 0 20%;border:1px solid black;">此浏览器不支持canvas,请更换浏览器</canvas>
       <div id="buttons">
           <a href="#">source-over</a>
           <a href="#">source-atop</a>
           <a href="#">source-in</a>
           <a href="#">source-out</a>
           <a href="#">destination-over</a>
           <a href="#">destination-atop</a>
           <a href="#">destination-in</a>
           <a href="#">destination-out</a>
           <a href="#">lighter</a>
           <a href="#">xor</a>
           <a href="#">copy</a>
       </div>
       <script type="text/javascript">
           window.onload=function(){
               draw("source-over");
               var buttons=document.getElementById("#buttons").getElementsByTagName("a");
               for(var i=0;i<buttons.length;i++){
                   buttons[i].onclick=function(){
                       draw(this.text);
                       return false;
                   }
               }
           }
               function draw(x){
                   var canvas = document.getElementById("canvas");
                   var context = canvas.getContext("2d");
                   /**清空画布**/
                   context.clearRect(0,0,canvas.width,canvas.height);
                   /**标题**/
                   context.font="bold 40px sans-serif";
                   context.textAlign="center";
                   context.textBaseline="middle";
                   context.fillText("globalCompsitionOperation的值为："+x,canvas.width/2,60);
                   /**方框**/
                   context.fillStyle="blue";
                   context.fillRect(300,150,500,500);

                   context.globalCompositeOperation =x;
                   /**三角形**/
                   context.fillStyle="red";
                   context.beginPath();
                   context.moveTo(700,250);
                   context.lineTo(1000,750);
                   context.lineTo(400,750);
                   context.closePath();
                   context.fill();
               }

       </script>
   </body>
</html>