html5 canvas畫布

AnnettaMcca 8年前發布 | 9K 次閱讀 HTML 局域網 服務器 web 訪問 

<!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></pre>
 本文由用戶 AnnettaMcca 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！