<!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,請(qǐng)更換瀏覽器</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>
3 回答
5E
TA貢獻(xiàn)115條經(jīng)驗(yàn) 獲得超39個(gè)贊
var buttons=document.getElementById("#buttons").getElementsByTagName("a");
這句話中的document.getElementById("buttons")應(yīng)該這樣寫，沒(méi)有#。
- 3 回答
- 1 關(guān)注
- 1241 瀏覽
添加回答
舉報(bào)
0/150
提交
取消