3.標籤篇：canvas

# 3.標籤篇：canvas

 

- 1. 語義化標籤

都是塊盒

<header></header>:頁頭

<footer></footer>:頁腳

<nav></nav>:導航

 

<article></article>:用於文章，能夠直接被引用拿走的

<section></section>:用於段落

 

<aside></aside>:側邊欄

 

- 2. canvas

 

<canvas></canvas>

```html

<style>

    #can{

        width:500px;

        height:300px;

        border:1px solid black;

    }

</style>

<!--canvas的大小要在行間樣式上寫width和height-->

<canvas id="can" width="500px" height="300px"><canvas>

<script>

    var canvas = document.getElementById("can");

    var ctx = canvas.getContext("2d");//得到畫筆

    //畫一條線

    ctx.lineWidth = 10;//設置線的粗細

    ctx.moveTo(100, 100);//起點

    ctx.lineTo(200, 100);//終點

    ctx.lineTo(200, 200);//終點

    //ctx.closePath();//以前的線是連續的，就能夠閉合起點和最後一個終點

    //ctx.fill();//未閉合區域填充色彩

    ctx.stroke();//展現畫出的效果

    

    ctx.beginPath();//重現開啓一個新路徑

    ctx.lineWidth = 5;//設置線的粗細

    ctx.moveTo(200, 200);//起點

    ctx.lineTo(300, 300);//終點

    ctx.stroke();

</script>

 

<script>

    var canvas = document.getElementById("can");

    var ctx = canvas.getContext("2d");//得到畫筆

    //畫一個矩形，方式一

    ctx.rect(100, 100, 200, 100);//給出矩形起點的座標和長與寬

    ctx.fill();

    ctx.stroke();

 

    //畫一個矩形，方式二

    ctx.strokeRect(100, 100, 200, 100);

 

    //畫一個矩形，方式三

    ctx.strokeRect(100, 100, 200, 100);

</script>

 

<script>

    //寫一個下落的矩形

    var canvas = document.getElementById("can");

    var ctx = canvas.getContext("2d");//得到畫筆

 

    var height = 100;

    var timer = setInterval(function(){

        ctx.clearRect(0, 0, 500, 300);//清除畫布矩形區域上，原來畫的圖案

        ctx.strokeRect(100, height, 50, 50);

        height += 2;

    }, 1000 / 30);

</script>

 

<script>

    //畫圓，圓心(x, y), 半徑r, 弧度(起始弧度, 結束弧度), 方向(順時針或逆時針)

    //弧度從0開始，右手邊水平方向位置

    //弧度以圓周長計算，其中Math.PI表明圓周率π

    //順時針爲0，逆時針爲1

    var canvas = document.getElementById("can");

    var ctx = canvas.getContext("2d");//得到畫筆

    //畫一個圓

    //arc(圓心x, 圓心y, 半徑r, 起始弧度, 結束弧度, 方向)

    ctx.arc(100, 100, 50, 0, Math.PI/2, 0);

    ctx.lineTo(100,100);

    ctx.closePath();

    ctx.stroke();

</script>

 

<script>

    var canvas = document.getElementById("can");

    var ctx = canvas.getContext("2d");//得到畫筆

    //畫一個圓角矩形

    ctx.moveTo(100, 110);//起點A

    //arcTo(矩形拐角B點x, 矩形拐角B點y, 弧形方向C點x, 弧形方向C點y, 弧形像素)

    ctx.arcTo(100, 200, 200, 200, 10);

    ctx.arcTo(200, 200, 100, 200, 10);

    ctx.arcTo(200, 100, 100, 100, 10);

    ctx.arcTo(100, 100, 100, 200, 10);

    ctx.fill();

    ctx.stroke();

</script>

 

<script>

    var canvas = document.getElementById("can");

    var ctx = canvas.getContext("2d");//得到畫筆

    //畫二次貝塞爾曲線

    ctx.beginPath();

    ctx.moveTo(100, 100);//起點A

    

    //quadraticCurveTo二次貝塞爾曲線的其餘兩個點座標

    ctx.quadraticCurveTo(200, 200, 300, 100);

    ctx.stroke();

 

    //畫三次貝塞爾曲線

    ctx.beginPath();

    ctx.moveTo(100, 100);//起點A

    

    //bezierCurveTo三次貝塞爾曲線的其餘三個點座標

    ctx.bezierCurveTo(200, 200, 300, 100, 400, 200);

    ctx.stroke();

 

    //畫一個寬500，高300的波浪

    var width = 500;

    var height = 300;

    var num = 0;

    var offset = 0;

    setInterval(function(){

        ctx.clearRect(0, 0, 500, 300);

        ctx.beginPath();

        ctx.moveTo(0, height / 2);//起點A

        

        //quadraticCurveTo二次貝塞爾曲線的其餘二個點座標

        ctx.quadraticCurveTo(width/4 + offset - 500, height/2 + Math.sin(num)* 100, width/2 + offset - 500, height/2 + Math.sin(num)* 100);

        ctx.quadraticCurveTo(width/4*3 + offset - 500, height/2 - Math.sin(num)* 100, width + offset - 500, height/2 - Math.sin(num)* 100);

 

        //quadraticCurveTo二次貝塞爾曲線的其餘二個點座標

        ctx.quadraticCurveTo(width/4 + offset, height/2 + Math.sin(num)* 100, width/2 + offset, height/2 + Math.sin(num)* 100);

        ctx.quadraticCurveTo(width/4*3 + offset, height/2 - Math.sin(num)* 100, width + offset, height/2 - Math.sin(num)* 100);

        ctx.stroke();

        offset += 5;

        offset %= 500;

        num += 0.02;

    }, 1000/30);

</script>

 

<script>

    var canvas = document.getElementById("can");

    var ctx = canvas.getContext("2d");//得到畫筆

    //座標系原點默認是畫布的左上角

    //旋轉

    ctx.beginPath();

    ctx.translate(100, 100);//座標系原點平移到100,100

    ctx.rotate(Math.PI / 6);//根據座標系原點進行旋轉

    ctx.moveTo(0, 0);//起點A

    ctx.lineTo(100, 0);

    ctx.stroke();

</script>

 

<script>

    var canvas = document.getElementById("can");

    var ctx = canvas.getContext("2d");//得到畫筆

    

    ctx.beginPath();

    ctx.scale(2, 1);//縮放

    ctx.strokeRect(100, 100, 100, 100);

</script>

 

<script>

    var canvas = document.getElementById("can");

    var ctx = canvas.getContext("2d");//得到畫筆

    //改變座標系的狀態後，怎樣變回原來的座標狀態

    ctx.save();//首先保存原座標系的狀態，能夠保存座標系的平移，縮放，旋轉數據

    ctx.translate(100, 100);//座標系原點平移

    ctx.rotate(Math.PI/4);//旋轉

 

    ctx.beginPath();

    ctx.strokeRect(0, 0, 100, 50);

 

    ctx.beginPath();

    ctx.restore();//恢復原座標系的狀態

    ctx.strokeRect(200, 0, 100, 50);

</script>

 

<script>

    //記住：紋理的填充都是以座標系原點進行填充的，因此填充以前，看是否須要改變座標系原點

    //canvas背景填充

    var canvas = document.getElementById("can");

    var ctx = canvas.getContext("2d");//得到畫筆

 

    var img = new Image();

    img.src = "./good.png";

    img.onload = function(){

        ctx.beginPath();

        ctx.translate(100, 100);//改變座標系原點

        var bg = ctx.createPattern(img, "no-repeat");//爲畫填充紋理

        ctx.fillStyle = bg;//換背景

        ctx.fillRect(100, 100, 200, 100);

    };

</script>

 

<script>

    //canvas線性漸變，線性漸變的起點是座標系原點

    var canvas = document.getElementById("can");

    var ctx = canvas.getContext("2d");//得到畫筆

 

    ctx.beginPath();

    var bg = ctx.createLinearGradient(0, 0, 200, 0);//漸變的兩點的座標

    bg.addColorStop(0, "white");//添加關鍵點，第一個參數只能0-1

    bg.addColorStop(0.5, "blue");

    bg.addColorStop(1, "black");

    ctx.fillStyle = bg;

    ctx.fillRect(0, 0, 200, 100);

</script>

 

<script>

    //canvas輻射漸變，輻射漸變的起點是座標系原點

    var canvas = document.getElementById("can");

    var ctx = canvas.getContext("2d");//得到畫筆

 

    ctx.beginPath();

    var bg = ctx.createRadialGradient(100, 100, 30, 100, 100, 100);//漸變的圓心座標x1,y1,半徑r1;圓心座標x2,y2,半徑r2;

    bg.addColorStop(0, "white");//添加關鍵點，第一個參數只能0-1

    bg.addColorStop(0.5, "black");

    bg.addColorStop(1, "white");

    ctx.fillStyle = bg;

    ctx.fillRect(0, 0, 200, 200);

</script>

 

<script>

    //給矩形添加陰影

    var canvas = document.getElementById("can");

    var ctx = canvas.getContext("2d");//得到畫筆

 

    ctx.beginPath();

    ctx.shadowColor = "blue";//添加陰影顏色

    ctx.shadowBlur = 20;//添加陰影半徑

    ctx.shadowOffsetX = 15;//橫座標的陰影向右平移15px

    ctx.shadowOffsetY = 15;//縱座標的陰影向右平移15px

    ctx.strokeRect(0, 0, 200, 200);

</script>

 

<script>

    //繪製文字

    var canvas = document.getElementById("can");

    var ctx = canvas.getContext("2d");//得到畫筆

 

    ctx.beginPath();

    ctx.strokeRect(0, 0, 200, 200);

    ctx.fillStyle = "red";

    ctx.font = "30px Georgia";//字體大小，字體

 

    ctx.strokeText("panda", 200, 100);//回執的文字，橫座標，縱座標。對文字描邊，產生空心文字

    ctx.fillText("panda", 200, 300);//回執的文字，橫座標，縱座標。對文字填充，產生實心文字，能夠改變文字顏色

</script>

 

<script>

    //線端樣式

    var canvas = document.getElementById("can");

    var ctx = canvas.getContext("2d");//得到畫筆

 

    ctx.beginPath();

    ctx.lineWidth = 15;

    ctx.moveTo(100, 100);

    ctx.lineTo(200, 100);

    //ctx.lineCap = "square";//線兩端的樣式。butt:原封不動;squre:方形;round:半圓;

    ctx.lineTo(100, 150);

    //ctx.lineJoin = "round";//兩條線交匯的樣式。round:圓角;bevel:截斷;miter:尖銳(設置爲miter有一個miterLimit屬性，防止過度尖銳);

    //ctx.miterLimit = 5;//兩條線交匯，限制交匯的長度

    ctx.stroke();

</script>

```

 

以上是markdown格式的筆記