                        課程
                    
                        /前端開發
                        
                            /Html5
                        
                        /炫麗的倒計時效果Canvas繪圖與動畫基礎

不明白X軸Y軸的數值怎么得來的算的那么準

不明白X軸Y軸里面的數值怎么弄

qq那些年

2017-10-17

源自：炫麗的倒計時效果Canvas繪圖與動畫基礎 2-2

關注問題我要回答

1232

操作

收起

2 回答

丹恪夢
2018-12-30

<!doctype?html>
<html?lang="zh-CN">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"
?content="width=device-width,?user-scalable=no,?initial-scale=1.0,?maximum-scale=1.0,?minimum-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>七巧板</title>
????<style?type="text/css">
????????#canvas?{
????????????border:?1px?solid?#ccc;
????????????display:?block;
????????????margin:?auto;
????????}
????</style>
</head>
<body>
<canvas?id="canvas"?width="400"?height="400"></canvas>

<script?type="text/javascript">
????var?tangram?=?[
????????{p:?[{x:?0,?y:?0},?{x:?400,?y:?0},?{x:?200,?y:?200}],?color:?"#ff0f09"},
????????{p:?[{x:?0,?y:?0},?{x:?0,?y:?400},?{x:?200,?y:?200}],?color:?"#feff0a"},
????????{p:?[{x:?0,?y:?400},?{x:?200,?y:?400},?{x:?100,?y:?300}],?color:?"#ff09f7"},
????????{p:?[{x:?100,?y:?300},?{x:?200,?y:?400},?{x:?300,?y:?300},{x:?200,?y:?200}],?color:?"#ffdc52"},
????????{p:?[{x:200,y:400},?{x:400,y:400},?{x:400,y:200}],?color:?"#0608ff"},
????????{p:?[{x:200,y:200},?{x:300,y:300},?{x:300,y:100}],?color:?"#30ff10"},
????????{p:?[{x:300,y:300},?{x:300,y:100},?{x:400,y:0},?{x:400,y:200}],?color:?"#ffa41a"},
????];

????var?canvas?=?document.getElementById("canvas");?//?獲取canvas
?var?context?=?canvas.getContext("2d");??//?獲取2d繪圖環境

?for?(var?i?=?0;?i?<?tangram.length;?i++)?{
????????draw(tangram[i],?context);
????}

????function?draw(piece,?context)?{
????????context.beginPath();

????????context.closePath();

????????context.moveTo(piece.p[0].x,?piece.p[0].y);

????????for?(var?i?=?0;?i?<?piece.p.length;?i++)?{
????????????context.lineTo(piece.p[i].x,?piece.p[i].y);
????????}

????????context.fillStyle?=?piece.color;
????????context.fill();
????}
</script>
</body>
</html>