html5 canvas画布

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
    <canvas id="myCanvas" width="80px" height="80px" style="border: 1px solid #000000"></canvas>
    <canvas id="myCanvas2"></canvas>
    <canvas id="myCanvas3"></canvas>
    <canvas id="myCanvas4"></canvas>
    <canvas id="myCanvas5"></canvas>
    <canvas id="myCanvas6"></canvas>

    <script>
        <!--原刑渐变-->
        var h = document.getElementById("myCanvas6");
        var ctx6 = h.getContext("2d");
        var grd2 = ctx6.createRadialGradient(50,90,15,90,60,100);
        grd2.addColorStop(0,"red");
        grd2.addColorStop(1,"white");
        ctx6.fillStyle=grd2;
        ctx6.fillRect(10,10,150,80);
        <!--长方行颜色渐变-->
        var g=document.getElementById("myCanvas5");
        var ctx5 = g.getContext("2d");
        var grad = ctx5.createLinearGradient(0,0,200,0);
        grad.addColorStop(1,"red");
        grad.addColorStop(0,"white");
        ctx5.fillStyle=grad;
        ctx5.fillRect(20,20,150,150);
        <!--空心文字-->
        var f = document.getElementById("myCanvas4");
        var ctx4 = f.getContext("2d");
        ctx4.font="30px Arial";
        ctx4.strokeText("Hello World",10,50);
        <!--实心文字-->
        var e = document.getElementById("myCanvas3")
        <!--获得上下文,并定义文字属性-->
        var ctx3= e.getContext("2d");
        ctx3.font="30px Arial";
        ctx3.textBaseline="hanging";
        ctx3.textAlign="ltr";
        ctx3.fillText("Hello World",10,50);

        <!--画圆-->
        var d = document.getElementById("myCanvas2");
        var ctx2 = d.getContext("2d");
        ctx2.beginPath();
        ctx2.arc(95,50,40,0,2*Math.PI);
        ctx2.stroke();
        <!--画布设置颜色-->
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.fillStyle="#FF0000";
        ctx.fillRect(0,0,35,25);
        ctx.moveTo(0,0);
        ctx.lineTo(35,25);
        ctx.stroke();
    </script>
</body>
</html>


你可能感兴趣的:(html5 canvas画布)