h5 画布canvas标签-蒲公英云

h5 画布canvas标签

画布
    canvas标签,通过控制坐标在canvas上绘制图形
        能够配合js实现非常复杂的动画效果
            <canvas></canvas>    
    获得画笔(只能在js中使用)
        对象.getContext("2d");
        在js中，获得该对象后
            var ctx=canvas.getContext("2d");  获得2d画笔
    绘画(无颜色)
        矩形需要开始和结束的坐标
            画笔.rect(0,0,30,30);
    填充绘画图形
        填充矩形
            画笔.fillRect(0,0,20,02);
    绘画只有边框的图形
        绘画矩形边框
            画笔对象.strokeRect(坐标);
                ctx.strokeRect(20,20,40,40);
    颜色
        更改填充颜色(必须放在画笔填充之前)
            画笔.fillStyle="颜色";
            ctx.fillStyle="yellow";
            ctx.fillRect(0,20);
        改变边框颜色(在绘画边框之前使用)
            ctx.strokeStyle="颜色";
            ctx.strokeStyle="green";
    给绘制图像添加阴影
        画笔对象.shadowColor="颜色"
    阴影偏移
        X方向偏移：画笔对象.shadowOffsetX="不带px的数字" 
        Y方向偏移：画笔对象.shadowOffsetY="不带px的数字"
    设置阴影模糊级别
        画笔对象.shadowBlur=级别数字;
            ctx.shadowBlur=3;
    设置线性渐变色
        var 渐变色对象可作为fillStyle和strokStyle的值
            活动渐变色对象同时设置线性渐变色的作用坐标
                var colo=ctx.createLinearGradient(0,0,100,0); 设置水平方向的渐变色作用域
                ctx.createLinearGradient(起始x,起始y,结束x,结束y)
                通过坐标的方向和距离开始填充,y坐标不设置,则只会填充水平方向
            添加渐变色颜色
                colo.addColorStop(数字代表作用域,"颜色");
                    var colo=ctx.createLinearGradient(0,0,0,100);
                    colo.addColorStop(0,"orange");
                    colo.addColorStop(0.5,"black");
                    colo.addColorStop(1,"white");
                    ctx.fillStyle=colo;
                    ctx.fillRect(0,0,20,20);
    设置放射性渐变色
        var 渐变色对象=画笔对象.createRadialGradient(圆心坐标)
                var fcolo=ctx.createRadialGradient(50,50,10,50,50,50)
        添加渐变色颜色
            渐变色对象.addColorStop(数字作用域,"颜色");
                fcolo.addColorStop(0,"red");
                fcolo.addColorStop(0.5,"blue");
                fcolo.addColorStop(1,"green");
                ctx.fillStyle=fcolo;

代码示例:

<html>
    <head>
        <meta charset="utf-8">
        <title>canvas 容器</title>
    </head>
    <style type="text/css">
            canvas{ 
                background-color: red;
            }
    </style>
    <script type="text/javascript">
    function t1(){ 
        var canvas=document.getElementById("showcanvas");
        var ctx=canvas.getContext("2d");
// ctx.rect(0,0,30,30)
        var colo=ctx.createLinearGradient(0,0,0,100);
        var fcolo=ctx.createRadialGradient(50,50,10,50,50,50)
        fcolo.addColorStop(0,"red");
        fcolo.addColorStop(0.5,"blue");
        fcolo.addColorStop(1,"green");
        colo.addColorStop(0,"orange");
        colo.addColorStop(0.5,"black");
        colo.addColorStop(1,"white");
        ctx.shadowColor="blue";
        ctx.shadowBlur=2;
        ctx.shadowOffsetX="3";
        ctx.shadowOffsetY="2";
        ctx.fillStyle=fcolo;
        ctx.fillRect(0,0,80,80);
        ctx.strokeStyle="green"
        ctx.strokeRect(20,20,40,40)
    }
    </script>
    <body onload="t1()">
        <canvas id="showcanvas"></canvas>
    </body>
</html>