                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /Canvas繪圖詳解

我的代碼不知道哪兒錯(cuò)了~

<!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);
?? ??? ??? ??? ??? ?/**標(biāo)題**/
?? ??? ??? ??? ??? ?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>