[学习笔记]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>

知道了canvas绘图其实是在canvas.getContext('2d')环境里进行的，要先声明之。

绘图分两个步骤，首先描绘路径轨迹，然后渲染填充。

在页面中存在绘制多个图形的情况下，避免各个路径之间互相干扰，要把每段完整的路径用beginPath()和closePath()包围起来保证代码的完整性。

值得一提的是在路径末端加了closePath()后，绘制的路径会自动收尾封闭，即如果绘制了三角形的两条边，那么closePath()会自动补全第三条边使图形成为封闭的三角形。

其中绘制圆形路径用arc(x,y,r,0,2*Math.PI，true),其中xy为圆心坐标，r为半径，0为起点，2*Math.PI为终点，true为逆时针方向绘制该圆

圆形解剖：

将路径变成线条使用stroke()，用lineWidth属性设置线条的粗细，用strokeStyle设置颜色；

填充路径用fill()，用fillStyle设置填充色。

 

吃饭，未完待续。。。

 

posted @ 2016-04-02 19:11  不晚不晚  阅读(212)  评论(0)    收藏  举报