[学习笔记]HTML5之canvas

Posted

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>

技术分享

知道了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设置填充色。

 

吃饭,未完待续。。。

 

以上是关于[学习笔记]HTML5之canvas的主要内容,如果未能解决你的问题,请参考以下文章

[html5] 学习笔记-Canvas标签的使用

HTML5自学笔记[20 ]canvas绘图实例之绘制倒影

HTML5自学笔记[ 24 ]canvas绘图之星空草地

HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

[html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

HTML5 Canvas 学习笔记(canvas绘制线条矩形多边形圆形圆环组合图形文字自定义图像)