canvas繪圖 (重點)

網頁中的實時走勢圖,搶紅包,網頁遊戲,地圖應用..

(1)SVG 繪圖 2D矢量繪圖技術，2000年出現,後納入h5

(2)Canvas繪圖 2D位圖繪圖技術，H5提出

(3)WebGL繪圖 3D繪圖技術，尚未納入H5標準

Canvas繪圖難點所在:

(1)座標系

(2)單詞比較多

Canvas畫布:畫布是H5提供的繪圖基礎

您的瀏覽器版本太低，請升級

</canvas>

Canvas標籤在瀏覽器中默認是300*150的inine-block,畫布寬度高度屬性只能用js/屬性來賦值.

不能用CSS樣式賦值.

每個畫布上有且只有一個”畫筆”對象—使用該對象來繪圖

var ctx = canvas.getContext(“2d”); 得到畫布的畫筆對象

(1)使用canvas繪製矩形(長方形)

矩形定位點在自己左上角

ctx.lineWidth = 1; 描邊寬度(邊線寬度)

ctx.fillStyle = “#999”; 填充樣式

ctx.strokeStyle = “#000”; 描邊樣式

ctx.fillRect(x,y,w,h); 填充矩形

ctx.strokeRect(x,y,w,h); 描邊矩形

ctx.clearRect(x,y,w,h); 清除矩形範圍內所有圖形

練習:左上角右上角左下角右下角居中

繪製5個矩形，大小100*80 填充，顏色不同

ex：不斷碰撞移動的方塊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <canvas id="ca" width="600px" height="600px">

    </canvas>
    <script>
        //獲取畫布
        var ca=document.getElementById("ca")
        //獲取畫筆
        var ctx=ca.getContext("2d")
        //繪製矩形
        ctx.fillStyle="red";
        ctx.fillRect(0,0,100,80)
        ctx.fillStyle="black"
        ctx.fillRect(600-100,0,100,80)
        ctx.fillStyle="#ddd"
        ctx.fillRect(0,600-80,100,80)
        ctx.fillStyle="#ccc"
        ctx.fillRect(600-100,600-80,100,80)
        ctx.fillStyle="#aff"
        ctx.fillRect(300-50,300-40,100,80);
        ctx.clearRect(0,0,600,600);
        ctx.strokeStyle="#000";
        //控制物體左右移動
        var x=0
        var y=0
        //設置一個變量來控制物體的移動方向
        var xdirection=1
        var ydirection=1
        var time=setInterval(function () {
            ctx.clearRect(0,0,600,600)
            x+=1*xdirection
            y+=1*ydirection
            ctx.strokeRect(x,y,100,80)
            if(x>500){
                xdirection=-xdirection
            }else if(x<0){
                xdirection=-xdirection
            }
            if(y>520){
                ydirection=-ydirection;
            }else if(y<0){
                ydirection=-ydirection
            }
        },0.01)
        //控制物體上下移動
        // var y=0
        // var ydirection=1
        // var time2=setInterval(function () {
        //     ctx.clearRect(0,0,600,600);
        //     y+=1*ydirection;
        //     ctx.strokeRect(0,y,100,80)
        //     if(y>520){
        //         ydirection=-ydirection;
        //     }else if(y<0){
        //         ydirection=-ydirection
        //     }
        // },1)



    </script>
</body>
</html>

(2)使用canvas繪製文本

ctx.textBaseline = “alphabetic” 文本基線（默認值）

ctx.font = “12px sans-serif”; 文本大小和字體

ctx.fillText(str,x,y); 填充一段文本

ctx.strokeText(str,x,y) 描邊一段文本

如圖，繪製文本是空心的，而填充是實心的

ctx.measureText(str); 測量文本寬度

ex:更改文本基線爲top（可以使得字母可見）（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="c2" width="600px" height="600px" style="background-color: yellow">
    您的瀏覽器版本太低,請及時升級
</canvas>
<script>
    var str="abcxyz"
    var c2=document.getElementById("c2")
    var ctx=c2.getContext("2d")
    //設置基準線
    ctx.textBaseline="top"
    ctx.font="39px sans-serif"
    //繪製填充矩形
    ctx.fillText(str,0,0)
</script>
</body>
</html>

練習:左上角右上角左下角右下角居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="c2" width="600px" height="600px" style="background-color: yellow">
    您的瀏覽器版本太低,請及時升級
</canvas>
<script>
    var str="abcxyz"
    var c2=document.getElementById("c2")
    var ctx=c2.getContext("2d")
    //設置基準線
    ctx.textBaseline="top"
    ctx.font="39px sans-serif"
    //讀取文本的寬
    var w=ctx.measureText(str).width
    //繪製填充矩形
    ctx.fillText(str,0,0)
    //右上角
    ctx.fillText(str,600-w,0)
    //右下角
    ctx.fillText(str,600-w,600-39)
    //左下角
    ctx.fillText(str,0,600-39)
    //中間
    ctx.fillText(str,300-w/2,300-39/2)
</script>
</body>
</html>

左右移動文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="c2" width="600px" height="600px" style="background-color: yellow">
    您的瀏覽器版本太低,請及時升級
</canvas>
<script>
    var str="abcxyz"
    var c2=document.getElementById("c2")
    var ctx=c2.getContext("2d")
    //設置基準線
    ctx.textBaseline="top"
    ctx.font="39px sans-serif"
    //讀取文本的寬
    var w=ctx.measureText(str).width
    var x=0;
    var xdirection=1;
    var timer=setInterval(function(){
        //清除畫布
        ctx.clearRect(0,0,600,600)
        //修改x
        x+=1*xdirection
        //繪製文本
    ctx.fillText(str,x,0)
        //判斷
    if(x>600-w){
            xdirection=-xdirection
    }else if(x<0){
            xdirection=-xdirection
    }
    },10)

</script>
</body>
</html>

canvas繪製---(重點)路徑

path:由多個座標點組成任意形狀，路徑不可見，可用於“描邊”,”填充”.

#複雜圖形依靠路徑

ctx.beginPath(); 開始一條新路徑

ctx.closePath(); 閉合當前路徑

ctx.moveTo(x,y); 移動到指定點

ctx.lineTo(x,y); 從當前點到指定點畫直線

ctx.lineWidth=n 設置線的寬度

ctx.arc(cx,cy,r,start,end); 繪製圓拱型

cx,cy 圓心

r 半徑

start,end 開始角度和結束角度

#圓弧度 0~2*Math.PI

#角度=>弧度 n*Math.PI/180=>弧度

ctx.stroke(); 描邊

ctx.fill(); 填充

ex:畫一個x-y座標軸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="600px" height="600px" id="c1" style="background-color: #4cae4c">
    您的瀏覽器版本太低請及時升級
</canvas>
<script>
    var c1=document.getElementById("c1")
    var ctx=c1.getContext("2d");
    ctx.beginPath()
    ctx.moveTo(40,300)
    ctx.strokeStyle="#ddd"
    ctx.lineTo(40,0)
    ctx.lineTo(40-25,25)
    ctx.moveTo(40,0)
    ctx.lineTo(40+25,25)
    ctx.moveTo(40,300)
    ctx.strokeStyle="#aff"
    ctx.lineTo(300,300)
    ctx.lineTo(300-25,300-25)
    ctx.moveTo(300,300)
    ctx.lineTo(300-25,300+25)
    ctx.lineWidth=5;
    ctx.stroke()
</script>
</body>
</html>

練習:創建一個函數 openMouth(),畫右側圖形

練習:創建一個函數 closeMouth(),畫左側圖形

練習:定時器，每隔1S，交替調用上述兩個函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="c1" width="600px" height="600px" style="background-color: yellow"></canvas>

<script>
    // //=========畫兩個同心圓====================
    // var c1=document.getElementById("c1")
    // var ctx=c1.getContext("2d")
    // ctx.beginPath();
    // ctx.strokeStyle="blue"
    // ctx.arc(300,300,200,0,2*Math.PI)
    // ctx.stroke()
    // ctx.beginPath()
    // //畫裏面的圓
    // ctx.strokeStyle="red"
    // ctx.arc(300,300,80,0,360*Math.PI/180)
    // ctx.lineWidth=6
    // ctx.stroke()
    //=============畫兩個笑臉==========
    //======================
    var c1 = document.getElementById("c1")
    var ctx = c1.getContext("2d")
  var closeMouth=function () {
      ctx.beginPath()
      ctx.arc(300, 300, 200, 0, 2 * Math.PI)
      ctx.strokeStyle = "black"
      ctx.lineTo(300, 300)
      ctx.stroke()
      //畫眼睛
      ctx.beginPath()
      ctx.arc(370, 240, 50, 0, 2 * Math.PI)
      ctx.fillStyle = "blue"
      ctx.fill()
      //畫眼珠
      ctx.beginPath()
      ctx.arc(373, 225, 6, 0, 2 * Math.PI)
      ctx.fillStyle = "#fff"
      ctx.fill()
  }
    //========================
   var openMouth=function () {
       //畫大臉盤子
       ctx.beginPath()
       ctx.strokeStyle = "black"
       ctx.arc(300, 300, 200, 1 / 4 * (Math.PI), 7 / 4 * Math.PI)
       ctx.lineTo(300, 300)
       ctx.closePath()
       ctx.stroke()
       //畫個眼睛
       ctx.beginPath()
       ctx.fillStyle = "blue"
       ctx.arc(320, 200, 50, 0, 2 * Math.PI)
       ctx.fill()
       //畫眼珠
       ctx.beginPath()
       ctx.arc(323, 185, 6, 0, 2 * Math.PI)
       ctx.fillStyle = "#fff"
       ctx.fill()
   }
    var x=1;
   setInterval(
       function () {
           x++
           if(x%2==0) {
               ctx.clearRect(0,0,600,600)
               closeMouth()
           }else {
               ctx.clearRect(0,0,600,600)
               openMouth()
           }
       },1000
   )
</script>
</body>
</html>

canvas繪製---(重點)圖像

canvas 屬於客戶端技術，圖片保存服務器，所以瀏覽器先下載，再繪製圖片，且等待圖處下載完成.

var p3 = new Image();

p3.src = “x.jpg”; #下載指定圖片

p3.onload = function(){ #當圖片下載成功後觸發事件

console.log(p3.width);

ctx.drawImage(p3,x,y); //繪製原始大小圖片

ctx.drawImage(p3,x,y,w,h); //拉伸圖片

}

canvas繪製---(重點)圖像->變形

canvas繪圖中有變形技術同，可以針對某一個圖形/圖像在繪製過程中進行變形:rotate();translate();平移原點

ctx.rotate(弧度); 旋轉繪製圖像以畫布原點爲軸心.（旋轉的角度是在累加的）

ctx.translate(x,y); 將畫布原點平移到指定位置

ctx.save(); 保存畫筆當前所有狀態值

ctx.restore(); 恢復畫筆上一次保存時所有狀態值（弧度值，畫布原點。。。）

練習:在畫布中心位置繪製一個旋轉飛機，以自己爲中心旋轉

練習:畫二架飛機，右上角飛機比中心飛機旋轉速度快一倍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<canvas width="600px" height="600px" id="c1" style="background-color: yellow">
    您的瀏覽器版本太低請升級
</canvas>
<script>
    var c1=document.getElementById("c1")
    var ctx=c1.getContext("2d");
    var p3=new Image()
    p3.src="img/p3.png"
    p3.onload=function () {
        var deg=10
        var timer=setInterval(function () {
            ctx.clearRect(0,0,600,600)
            //保存狀態
            ctx.save()
            //平移原點中心
            ctx.translate(300,300)
            ctx.rotate(deg*Math.PI/180)
            ctx.drawImage(p3,-100,-50)
            //回覆狀態(恢復狀態後需要自己累加旋轉角度)
            ctx.restore()
            deg+=10;
        },10)
    }

    var p4=new Image()
    p4.src="img/p4.png"
    p4.onload=function () {
        var deg2=20
        var timer2=setInterval(function () {
            ctx.clearRect(0,0,200,500)
            ctx.save()
            ctx.translate(500,100)
            ctx.rotate(deg2*Math.PI/180)
            ctx.drawImage(p4,-100,-50)
            ctx.restore()
            deg2+=20
        },10)
    }
    
</script>
</body>
</html>

H5新特性(canvas繪圖)+動態吃豆人+動態小飛機

canvas繪圖 (重點)

canvas繪製---(重點)路徑

canvas繪製---(重點)圖像

canvas繪製---(重點)圖像->變形

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

用js代碼製作2048小遊戲

git clone 新項目之後拉取分支代碼到本地

antd 複雜table的實現

git克隆以及創建個人分支

js中函數的作用域問題

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結