                        課程
                    
                        /前端開發
                        
                            /Html5
                        
                        /Canvas繪圖詳解

我的demo需要在每一次點擊前刷新才能正常的顯示圖片，另外頂部的文字有的時候不能正確的顯示，不知道是什么原因，希望大家可以幫我看一下，十分感謝！

<!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(compositeStyle){
?? ??? ??? ??? ??? ?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的值為："+compositeStyle,canvas.width/2,60);
?? ??? ??? ??? ??? ?/**方框**/
?? ??? ??? ??? ??? ?context.fillStyle="blue";
?? ??? ??? ??? ??? ?context.fillRect(300,150,500,500);
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?context.globalCompositeOperation =compositeStyle;
?? ??? ??? ??? ??? ?/**三角形**/
?? ??? ??? ??? ??? ?context.fillStyle="red";
?? ??? ??? ??? ??? ?context.beginPath();
?? ??? ??? ??? ??? ?context.moveTo(700,250);
?? ??? ??? ??? ??? ?context.lineTo(1000,750);
?? ??? ??? ??? ??? ?context.lineTo(400,750);
?? ??? ??? ??? ??? ?context.closePath();
?? ??? ??? ??? ??? ?context.fill();
?? ??? ??? ??? ?}
?? ??? ??? ?
?? ??? ?</script>
?? ?</body>
</html>