<!DOCTYPE?html>
<html>
<head>
????<title></title>
</head>
<body>
<canvas?id="canvas"?style="?width:800px;?height:800px;margin:0px?auto;?display:block;">
/*判斷瀏覽器?不兼容則切換瀏覽器*/
</canvas>
<script?type="text/javascript">
????/*七巧板*/
????var?tangram=[
????????{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
????????{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
????????{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
????????{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"f9f51a"},
????????{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
????????{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
????????{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}
????]
????window.onload=?function?()?{
????????var?canvas=document.getElementById("canvas");//獲取id
????????var?cantext=canvas.getContext("2d");//2d圖形
????????/*或者用if語句判斷瀏覽器*/
????????if(canvas.getContext("2d")){
????????????var?cantext=canvas.getContext("2d");//2d圖形
????????}else{
????????????alert("此瀏覽器不支持canvas,請更換瀏覽器")
????????}
????????/*獲取數(shù)組中的每一塊*/
????????for(var?i=0;i<tangram.length;i++){
????????????draw(tangram[i],cantext)
????????};
????????/*獲取每一塊的每一個坐標(biāo)*/
????????function?draw(piece,cxt){
????????????cxt.beginPath();
????????????cxt.moveTo(piece.p[0].x,piece.p[0].y);//起點(diǎn)
????????????for(var?i=1;i<piece.p.length;i++)
????????????cxt.lineTo(piece.p[i].x,piece.p[i].y);
????????????????cxt.closePath();
????????????????cxt.fillStyle=piece.color;
????????????????cxt.fill();
????????}
????}
</script>
</body>
</html>
2016-01-05
function?draw(piece,cxt){
????????????cxt.beginPath();
????????????cxt.moveTo(piece.p[0].x,piece.p[0].y);//起點(diǎn)
????????????for(var?i=1;i<piece.p.length;i++)
????????????cxt.lineTo(piece.p[i].x,piece.p[i].y);
????????????????cxt.closePath();
????????????????cxt.fillStyle=piece.color;
????????????????cxt.fill();
????????}
這段代碼不對 你自己看老師的 老師循環(huán)沒{}。
function draw(piece,cxt){
?? ??? ??? ?cxt.beginPath();
?? ??? ??? ?cxt.moveTo(piece.p[0].x,piece.p[0].y);
?? ??? ??? ?for(var i=1;i<piece.p.length;i++){
?? ??? ??? ??? ?cxt.lineTo(piece.p[i].x,piece.p[i].y)?? ?
?? ??? ??? ?}
?? ??? ??? ?cxt.closePath()
?? ??? ??? ??? ?cxt.fillStyle=piece.color;
?? ??? ??? ??? ?cxt.fill();
?? ??? ??? ?
?? ??? ?}
2015-12-18
2015-12-18
已解決 ?沒有在js中設(shè)置寬高
canvas.width=800;
canvas.height=800;
但我在html中設(shè)置了寬高沒有起作用，求解？？？？？？？？？？？
<canvas id="canvas" style=" width:800px; height:800px;margin:0px auto; display:block;">