HTML5_canvas 畫布

時間  2019-11-08
標籤 html5 html canvas 畫布 欄目 HTML5 简体版
原文   原文鏈接

<canvas></canvas> 畫布javascript

  • <canvas id="my_canvas" width="400" height="400">
     您的瀏覽器不支持 canvas，建議更換瀏覽器
    </canvas>

用於在網頁上繪製圖形css

canvas 是一個 inline-block 行內塊元素html

canvas 默認寬高：width: 300px;    height: 150px;java

canvas 不能使用 css 設置 width 和 height，會致使後面繪畫發生變形canvas

canvas 必須使用標籤上的屬性設置 width 和 height瀏覽器

 

  • 基本使用
  • 獲取畫布 
    • var myCanvas = document.getElementById("my_canvas");

       

 

  • 獲取畫筆（也叫「獲取上下文」） 
    • var painting = myCanvas.getContext("2d");

 

  • 畫矩形
      • 填充矩形
        • 看到這個 fill 必定和 填充 有關係
        • 看到這個 rect 必定是一個 矩形
        • painting.fillRect(0, 0, 100, 100);

          // 或者
          padding.rect(0, 0, 100, 100);
          padding.fill();
        • 填充顏色
        • padding.fillStyle = "red"; padding.fillStyle = "rgba(255, 255, 0, 0.4)";
      • 描邊矩形
        • 看到這個 stroke 必定和 描邊 有關係
        • painting.strokeRect(100, 100, 100, 100);

          // 或者
          padding.rect(100, 100, 100, 100);
          padding.stroke();
        • 設置線描邊的顏色 
          • padding.strikeStyle = "yellow";
        • 設置線的寬度 
          • padding.lineWidth = 20; padding.lineWidth = "10";
          • 在原有盒子的基礎上，描邊 會 裏外均等分佈
    • 參數1，參數2
      • 矩形的 左上角 座標
    • 參數3，參數4
      • 矩形的 width 和 height

 

  • 再開始繪製新圖形（相似繪畫的 "擡筆" 動做）
     
    • padding.beginPath();

 

  • 橡皮擦
  • 矩形橡皮擦 
    • painting.clearRect(0, 0, 100, 100);
    • 清除整個畫布 
      • padding.clearRect(0, 0, myCanvas.width, myCanvas.height);

 

  • 畫 線段
  • 畫筆移動到畫布起始點 
    • painting.moveTo(100, 100);

 

  • 設置畫筆的終點 
    • padding.lineTo(200, 100);
      /**** 除了 .fillRect 和 .strokeRect
       其餘繪製，都必須加 .fill(),或者 .stroke()
       才能看見圖形
       ****/
      painting.stroke(); // 線寬lineWidth 老是 線兩側均等分配

 

  • 設置 線段兩端 風格 
    • painting.lineCap = "butt"; // 默認值，方形結束 painting.lineCap = "round"; // 圓形結束 painting.lineCap = "square"; // 方形結束，可是當？？？？？？？？？？？？？？
  • <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>菜鳥教程(runoob.com)</title>
    </head>
    
    <body>

        <p>三種不一樣的結束線:</p>
        <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
            您的瀏覽器不支持 HTML5 canvas 標籤。
        </canvas>
        
        <script>
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            
            ctx.beginPath();
            ctx.lineWidth=10;
            ctx.lineCap="butt";
            ctx.moveTo(20,20);
            ctx.lineTo(200,20);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.lineCap="round";
            ctx.moveTo(20,40);
            ctx.lineTo(200,40);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.lineCap="square";
            ctx.moveTo(20,60);
            ctx.lineTo(200,60);
            ctx.stroke();
        </script>

    </body>
</html>

 

  • 連續線段 繪製 
    • painting.moveTo(100, 100); // 起點 painting.lineTo(100, 200); painting.lineTo(200, 200); // 線段鏈接處 樣式設置
painting.lineJoin = "bevel";    // 斜角 默認值
painting.lineJoin = "round";    // 圓角
painting.lineJoin = "miter"; // 直角


// 手動 繪製三角形 很差，會在鏈接處缺一個角
painting.lineTo(100, 100); // 手動鏈接 終點，起點，缺點： 會在鏈接處有一個缺角，且不會被 lineJoin() 設置樣式 // 閉合路徑 繪製三角形 必定要使用這個函數，來鏈接 終點，起點，且會全部角都會被 lineJoin() 設置到樣式
painting.closePath();  painting.fill(); // 有填充 painting.stroke(); // 同時描邊

 

注意： 從 獲取畫板 開始，到最終 .stroke() 臨摹，只要有一個錯誤，結果就不會顯示。console 控制檯並不會報錯函數

 

  • pen.save() 和 pen.restore()
    • 之間的樣式被包裹，相似函數變量做用域

 

練習1.flex

  • <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        
        <link rel="stylesheet" type="text/css" href="./css/index.css" />
        
        <script type="text/javascript" src="./js/kjfFunctions.js"></script>
        <script type="text/javascript" src="./js/index.js"></script>
        
        <style type="text/css">
            body {
                width: 100%;
                color: #000;
                background: #96b377;
                font: 14px Helvetica, Arial, sans-serif;
                text-align: center;
            }
        </style>
    </head>
    
    <body>
        
        <canvas id="my_canvas" width="600" height="600"> 
            您的瀏覽器不支持 canvas，建議更新或者更換瀏覽器。
        </canvas>
        
       
        
        
        <!-- javascript 代碼 -->
        <script type="text/javascript">
            // 1. 獲取畫板
            var myCanvas = document.getElementById("my_canvas");
            
            /* 不能 使用 css 設置 canvas 的 width 和 height */
            // 給畫布一個顏色
            myCanvas.style.backgroundColor = "#eee";
            
            // 2. 獲取畫筆
            var pen = myCanvas.getContext("2d");
            
            // 畫一個填充矩形
            pen.beginPath();
            pen.fillStyle = 'red';    // 必定要在繪製以前設置好 顏色
            pen.fillRect(100, 100, 200, 200);
            
            // 畫一個描邊矩形
            pen.beginPath();
            
            pen.strokeStyle = 'blue';    // 必定要在繪製以前設置好 顏色
            pen.lineWidth = 20;    // 必定要在繪製以前設置好 筆寬
            
            pen.strokeRect(150, 150, 100, 100);    // 寬高從 線的中線開始算
        </script>
    </body>
</html>

 

練習2. spa

  • <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        
        <link rel="stylesheet" type="text/css" href="./css/index.css" />
        
        <script type="text/javascript" src="./js/kjfFunctions.js"></script>
        <script type="text/javascript" src="./js/index.js"></script>
        
        <style type="text/css">
            body {
                width: 100%;
                color: #000;
                background: #96b377;
                font: 14px Helvetica, Arial, sans-serif;
                text-align: center;
            }
        </style>
    </head>
    
    <body>
        
        <canvas id="my_canvas" width="600" height="600"> 
            您的瀏覽器不支持 canvas，建議更新或者更換瀏覽器。
        </canvas>
        
        
        
        
        <!-- javascript 代碼 -->
        <script type="text/javascript">
            // 1. 獲取畫板
            var myCanvas = document.getElementById("my_canvas");
            
            /* 不能 使用 css 設置 canvas 的 width 和 height */
            // 給畫布一個顏色
            myCanvas.style.backgroundColor = "#eee";
            
            // 2. 獲取畫筆
            var pen = myCanvas.getContext("2d");
            
            // 3. 一次繪畫的開始
            pen.beginPath();
            
            // 4. 必定要在繪製以前 設置好（能夠在 pen.beginPath()以前設置）
            pen.fillStyle = 'red';    // 填充的顏色
            pen.strokeStyle = 'blue';    //  筆的顏色
            pen.lineWidth = 4;    // 筆寬
            pen.lineCap = "round";    // 圓形結束
            pen.lineJoin = "round";    // 圓角
            
            
    　　         // 5. 終於能夠開始畫了
            pen.moveTo(    100, 100);
            
            pen.lineTo(100, 200);
            pen.lineTo(150, 250);
            pen.closePath();
                
                // 畫布 老是顯示 .beginPath() 和 .closePath() 之間的繪畫____因此，須要的話，要成對出現
                pen.beginPath();   
                pen.moveTo(300, 300);
                pen.lineTo(500, 300);
                pen.lineTo(500, 500);
                pen.lineTo(300, 500);
                pen.closePath();    // 閉合路徑
    /**** 6. 必定要記得的 .stroke()臨摹 ****/ pen.stroke(); </script>
    </body>
</html>

 

簽名，DIY 畫板 案例3d

  •  

  • <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        
        <link rel="stylesheet" type="text/css" href="./css/index.css" />
        
        <script type="text/javascript" src="./js/kjfFunctions.js"></script>
        <script type="text/javascript" src="./js/index.js"></script>
        
        <style type="text/css">
            /**** btns ****/
            #btns button {
                padding: 0 10px;
                background-color: #565628;
                width: 116px;
                height: 30px;
                color: #c0cea7;
                font-size: 18px;
                line-height: 30px;
                text-align: center;
                outline: none;
                border: 0 none;
            }
            
            #btns button:hover {
                color: #bda0f1;
                font-size: 24px;
            }
            
            #btns button:active {
                color: #bda0f1;
                font-size: 18px;
            }
            
            body {
                width: 100%;
                color: #000;
                background: #96b377;
                font: 14px Helvetica, Arial, sans-serif;
            }
            
            #wrap {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            
            #wrap #btns{
                width: 600px;
                height: 100px;
                display: flex;
                justify-content: space-around;
                align-items: space-around;
            }
        </style>
    </head>
    
    <body>
        
        <div id="wrap">
            <canvas id="my_canvas" width="600" height="600"> 
                您的瀏覽器不支持 canvas，建議更新或者更換瀏覽器。
            </canvas>
            <div id="btns">
                <button id="eraser">橡皮擦</button>
                <button id="the_black">畫筆</button>
                <input id="chg_color" type="color" name="penColor" />
                <button id="add_width">筆粗</button>
                <button id="dec_width">筆細</button>
            </div>
        </div>
        
        <!-- javascript 代碼 -->
        <script type="text/javascript">
            // 1. 獲取畫板
            var myCanvas = document.getElementById("my_canvas");
            
            /* 不能 使用 css 設置 canvas 的 width 和 height */
            // 給畫布一個顏色
            myCanvas.style.backgroundColor = "#eee";
            
            // 2. 獲取畫筆
            var pen = myCanvas.getContext("2d");
            
            
            var chgColor = document.getElementById("chg_color");
            // 3. 必定要在繪製以前 設置好
            pen.fillStyle = 'red';    // 填充的顏色
            pen.strokeStyle = chgColor.value;    //  筆的顏色
            pen.lineWidth = 4;    // 筆寬
            pen.lineCap = "round";    // 圓形結束
            pen.lineJoin = "round";    // 圓角
            
            
            chgColor.addEventListener("change", watchColorPicker, false);

            function watchColorPicker(event) {
                pen.strokeStyle = chgColor.value;
            };
            
            var eraser = document.getElementById("eraser");
            eraser.onclick = function(){
                pen.strokeStyle = myCanvas.style.backgroundColor;
            };
            
            var theBlack = document.getElementById("the_black");
            theBlack.onclick = function(){
                pen.strokeStyle = chgColor.value;
            };
            
            var add_width = document.getElementById("add_width");
            add_width.onclick = function(){
                pen.lineWidth++;
            };
            
            var dec_width = document.getElementById("dec_width");
            dec_width.onclick = function(){
                pen.lineWidth--;
                if(pen.lineWidth <= 0){
                    pen.lineWidth = 1;
                }
            };
            
            myCanvas.onmousedown = function(e){
                e = e || window.event;
                
                myCanvas.setCapture && myCanvas.setCapture();
                
                var canvasX = myCanvas.getBoundingClientRect().left;
                var canvasY = myCanvas.getBoundingClientRect().top;
                
                // 4. 一次繪畫的開始
                pen.beginPath();
                
                pen.moveTo(e.clientX-canvasX, e.clientY-canvasY);
                
                myCanvas.onmousemove = function(e){
                    e = e || window.event;
                    
                    pen.lineTo(e.clientX-canvasX, e.clientY-canvasY);
                    /**** 5. 必定要記得的 臨摹 ****/
                    pen.stroke();
                };
                
                myCanvas.onmouseup = function(){
                    
                    myCanvas.onmousemove = null;
                    myCanvas.onmouseup = null;
                    myCanvas.releaseCapture && myCanvas.releaseCapture();
                };
                
                e.preventDefault && e.preventDefault();
                return false;
            };
            
        </script>
    </body>
</html>

 

五角星 案例

  • 畫布原點(0, 0)  位移 painting.translate(100, 100);

  •  

     

  •  

  • <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        
        <link rel="stylesheet" type="text/css" href="./css/index.css" />
        
        <script type="text/javascript" src="./js/kjfFunctions.js"></script>
        <script type="text/javascript" src="./js/index.js"></script>
        
        <style type="text/css">
            /**** btns ****/
            #btns button {
                padding: 0 10px;
                background-color: #565628;
                width: 116px;
                height: 30px;
                color: #c0cea7;
                font-size: 18px;
                line-height: 30px;
                text-align: center;
                outline: none;
                border: 0 none;
            }
            
            #btns button:hover {
                color: #bda0f1;
                font-size: 24px;
            }
            
            #btns button:active {
                color: #bda0f1;
                font-size: 18px;
            }
            
            body {
                width: 100%;
                color: #000;
                background: #96b377;
                font: 14px Helvetica, Arial, sans-serif;
            }
            
            #wrap {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            
            #wrap #btns{
                width: 600px;
                height: 100px;
                display: flex;
                justify-content: space-around;
                align-items: space-around;
            }
        </style>
    </head>
    
    <body>
        
        <div id="wrap">
            <canvas id="my_canvas" width="1000" height="900"> 
                您的瀏覽器不支持 canvas，建議更新或者更換瀏覽器。
            </canvas>
        </div>
        
        <!-- javascript 代碼 -->
        <script type="text/javascript">
            // 1. 獲取畫板
            var myCanvas = document.getElementById("my_canvas");
            
            /* 不能 使用 css 設置 canvas 的 width 和 height */
            // 給畫布一個顏色
            myCanvas.style.backgroundColor = "#eee";
            
            // 2. 獲取畫筆
            var pen = myCanvas.getContext("2d");
            
            // 3. 必定要在繪製以前 設置好
            pen.fillStyle = 'olive';    // 填充的顏色
            pen.strokeStyle = "blue";    //  筆的顏色
            pen.lineWidth = 4;    // 筆寬
            pen.lineCap = "round";    // 圓形結束
            pen.lineJoin = "round";    // 圓角
            
            // 4. 一次繪畫的開始
            pen.beginPath();
            
            drawStar(pen, 300, 300, 100,40);
            
            pen.closePath();
            
            /* 5. 必定要記得的 臨摹 */
            pen.stroke();
            
            
            
            /**** 封裝函數 ****/
            function drawStar(pen, centerX, centerY, R, r){
                pen.beginPath(centerX, centerY+R);
                pen.moveTo(centerX+R*Math.cos(18*Math.PI/180),centerY-R*Math.sin(18*Math.PI/180));
                
                for(var i=0;i<5;i++){
                    pen.lineTo(centerX+R*Math.cos((72*i+18)*Math.PI/180),centerY-R*Math.sin((72*i+18)*Math.PI/180))
                    pen.lineTo(centerX+r*Math.cos((72*i+54)*Math.PI/180),centerY-r*Math.sin((72*i+54)*Math.PI/180))
                };
            };
        </script>
    </body>
</html>

 

圓形 繪製

  • painting.arc(圓形點, 弧度, 起始弧度, 終點弧度, false 順時針);
  • painting.arc(200, 200, 100, 0, 2*Math.PI);
  • painting.arc(200, 200, 100, 0, 0.5*Math.PI);    // 順時針 畫 1/4 個圓弧
  • painting.arc(200, 200, 100, 0, 0.5*Math.PI, true);    // 逆時針 畫 3/4 個圓弧

 

 圓弧 繪製

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程