HTML5-canvas-基礎篇

<canvas>新元素

 <canvas> 元素用于圖形的繪制,通過腳本 (通常是JavaScript)來完成.

<canvas> 標簽只是圖形容器,您必須使用腳本來繪制圖形。

你可以通過多種方法使用Canva繪制路徑,盒、圓、字符以及添加圖像。

 

  注意: 默認情況下 <canvas> 元素沒有邊框和內容。

  畫方

<!--fillStyle是填充樣式,如果不設置fillStyle屬性,默認填充色為黑色,fillRect是畫一個矩形,參數為X,Y,Width,Height-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" name="author" content="趙慧娟">
        <title></title>
        <script src="Scripts/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            $(function(){
                var canvas=document.getElementById("myCanvas")
                var ctx=canvas.getContext("2d");
                ctx.fillStyle="deeppink";
                ctx.fillRect(10,10,100,100);
          //ctx.moveTo(0,0);    //定義開始坐標
         //ctx.lineTo(100,100);  //定義結束坐標
         //ctx.stroke();      //繪制線條

            })
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="100" height="100"></canvas>
    </body>
</html>

 

運行結果:

  畫圓

<!--arc畫圓,參數是X,Y,半徑,起始角,結束角,順時針/逆時針(可選)XY指的是圓點的距離-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" name="author" content="趙慧娟">
        <title></title>
        <script src="Scripts/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            $(function(){
                var canvas=document.getElementById("myCanvas")
                var ctx=canvas.getContext("2d");
                ctx.fillStyle="deeppink";
                ctx.arc(50,50,50,0,2*Math.PI);
                ctx.stroke();
         //ctx.fillText("Hello World",10,50);  //繪制實心字體
         //ctx.strokeText("Hello World",10,50); //繪制空心字體
})
        </script>
        <style type="text/css">
            canvas{
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="100" height="100"></canvas>
    </body>
</html>

 

運行結果:

  漸變

  createLinearGradient(x,y,x1,y1) - 創建線條漸變

  createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變

// 創建漸變
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"blue");
 
// 填充漸變
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

 

運行結果:

  徑向/圓漸變

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 創建漸變
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充漸變
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

 

運行結果:

圖像

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" name="author" content="趙慧娟">
        <title></title>
        <script src="Scripts/jquery-1.10.2.js"></script>
        <style type="text/css">
            canvas{
                border: 1px solid #000;
            }
            #flower{
                border: 1px solid #000;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <img src="img/a.ico" id="flower" />
        <canvas id="myCanvas" width="100" height="100"></canvas>
        <script type="text/javascript">
            $(function(){
                var canvas=document.getElementById("myCanvas")
                var ctx=canvas.getContext("2d");var img=document.getElementById("flower");
                img.onload=function(){
                    ctx.drawImage(img,20,20,80,80);  //drawImage(對象,X,Y,W,H)
                }
            })
        </script>
    </body>
</html>

 

運行結果:

(右圖為canvas圖像)

來源:itnose

上一篇: GraphQL 進階: 完全Websocket傳輸和混合(Hybrid)傳輸

下一篇: 5種做法實現table表格中的斜線表頭效果

分享到: 更多
百人牛牛怎么玩才能赢 上海时时投注 财神捕鱼网址下载 网络赌博龙虎怎么老输 3d组六稳赚不赔的方法 七乐彩中奖规则及奖金 7星彩开奖计划今天 七乐彩免费软件 双色球走势图表 pk10精准稳定人工计划 大乐透最强的十专家 博彩双面盘大小 金百博时时彩 幸运飞艇双面玩法怎么玩 北京pk拾云端计划软件 抢庄牌九特色游戏