[学习笔记]HTML5之canvas

Posted 2020-07-03

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[学习笔记]HTML5之canvas相关的知识，希望对你有一定的参考价值。

虐了一下午的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>