[學習筆記]HTML5之canvas

時間 2019-12-05

標籤學習筆記 html5 html canvas 欄目 HTML5 简体版

原文原文鏈接

虐了一下午的canvashtml

先擼了一個七巧板canvas

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>

<body>
<canvas id="canvas"  style="border:1px solid #ccc; display:block; margin:50px auto;">
</canvas>

<script>
    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},{x:0,y:0}],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 canavs=document.getElementById('canvas');

    canvas.width=800;
    canvas.height=800;

    var context=canvas.getContext('2d');
    for(var i=0;i<tangram.length;i++)
    draw(tangram[i],context)


}
    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();
    }
</script>

</body>
</html>