canvas系列(1)創建canvas、繪制路徑、繪制圓弧

1、定創建canvas畫布

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="1024" height="768" style="border: 1px solid #c3c3c3;">
            您的瀏覽器不支持canvas,請升級瀏覽器!
        </canvas>

    </body>
    <script>
        window.onload=function(){
            //canvas是采用JavaScript來獲取canvas元素
            var canvas =document.getElementById("canvas");
            //然后,創建 context 對象:
//          getContext("2d") 對象是內建的 HTML5 對象,擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
            var context=canvas.getContext("2d);//canvas的繪圖上下文環境
            
        }
    </script>
</html>


2、繪制直線
canvas繪圖是基于狀態的,然后在調用方法來繪圖

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="1024" height="768" style="border: 1px solid #c3c3c3;">
            您的瀏覽器不支持canvas,請升級瀏覽器!
        </canvas>

        <script>
        window.onload=function(){
            //canvas是采用JavaScript來獲取canvas元素
            var canvas =document.getElementById("canvas");
        
            ////canvas的繪圖上下文環境
            //  getContext("2d") 對象是內建的 HTML5 對象,擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
            var context=canvas.getContext("2d");
        //繪制直線,設置繪圖的狀態
           context.moveTo(100,100);//開始坐標
            context.lineTo(600,600);//結束坐標          
            context.strokeStyle="aqua";
        //具體繪制
         context.stroke();
        
        
        }
    </script>
    </body>
    
</html>

效果圖:

繪制直線.jpg

3、繪制三角形

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <title></title>
      <style>
          body{
              background-color: black;
              margin: 10 auto;
              padding: 0 auto;
          }
          #canvas{
              margin: 200px;
              
          }
      </style>
  </head>
  <body>
      <canvas id="canvas" width="1024" height="768" style="border: 1px solid #c3c3c3;">
          您的瀏覽器不支持canvas,請升級瀏覽器!
      </canvas>

      <script>
      window.onload=function(){
          //canvas是采用JavaScript來獲取canvas元素
          var canvas =document.getElementById("canvas");
      
          ////canvas的繪圖上下文環境
          //  getContext("2d") 對象是內建的 HTML5 對象,擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
          var context=canvas.getContext("2d");
      //繪制直線,設置繪圖的狀態
      //繪圖的原點是根據cancas邊框的左上角
         context.moveTo(100,100);//開始坐標
          context.lineTo(600,600);//第二個坐標點    
          context.lineTo(100,600);//第三個坐標點
          context.lineTo(100,100);//回到開始坐標
          context.strokeStyle="aqua";
      //具體繪制
       context.stroke();
      
      
      }
  </script>
  </body>
  
</html>

三角形.jpg

4、創建多個圖形(context--繪制路徑)
路徑
context.beginPath() context.closePath()

畫圓并不單單是直接用arc,它還用到beginPath()方法,和closePath()方法,如果沒有重新beginPath那么前面的路勁會保留。
a、系統默認在繪制第一個路徑的開始點為beginPath。
b、如果畫完前面的路徑沒有重新指定beginPath,那么畫第其他路徑的時候會將前面最近指定的beginPath后的全部路徑重新繪制。
c、每次調用context.fill()的時候會自動把當次繪制的路徑的開始點和結束點相連,接著填充封閉的部分。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body{
                background-color: black;
                margin: 10 auto;
                padding: 0 auto;
            }
            #canvas{
                margin: 200px;
                
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="1024" height="768" style="border: 1px solid #c3c3c3;">
            您的瀏覽器不支持canvas,請升級瀏覽器!
        </canvas>

        <script>
        window.onload=function(){
            //canvas是采用JavaScript來獲取canvas元素
            var canvas =document.getElementById("canvas");
        
            ////canvas的繪圖上下文環境
            //  getContext("2d") 對象是內建的 HTML5 對象,擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
            var context=canvas.getContext("2d");
        //1、繪制三角形
        //設置繪圖的狀態
        //繪圖的原點是根據cancas邊框的左上角
        context.beginPath();//重新指定繪制
           context.moveTo(100,100);//開始坐標
            context.lineTo(600,600);//第二個坐標點    
            context.lineTo(100,600);//第三個坐標點
            context.lineTo(100,100);//回到開始坐標
            context.closePath();//結束繪制路徑
            context.strokeStyle="aqua";//定義線條顏色
            context.lineWidth=5;//線條粗細度         
        //具體繪制三角形
         context.stroke();
        
//      繪制直線
             context.beginPath();//重新指定繪制路徑
             context.moveTo(300,200);
             context.lineTo(600,500);
             context.closePath();//結束繪制路徑
             context.lineWidth=10;
             context.fillStyle="chartreuse";//繪制填充顏色
             context.stroke();
        
        }
    </script>
    </body>
    
</html>

繪制多個圖形.jpg

5、創建七巧板(路徑繪制)
beginPath():新建路徑
closePath();閉合路徑
fill():填充圖形
stroke():繪制圖形輪廓
moveTo(x,y):繪制開始路徑點
lineTo(x,y):繪制結束路徑點

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body{
                background-color: black;
                margin: 10 auto;
                padding: 0 auto;
            }
            #canvas{
                margin: 200px;
                
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="1024" height="868" style="border: 1px solid #c3c3c3;">
            您的瀏覽器不支持canvas,請升級瀏覽器!
        </canvas>

        <script>
        window.onload=function(){
            //canvas是采用JavaScript來獲取canvas元素
            var canvas =document.getElementById("canvas");      
            ////canvas的繪圖上下文環境
            //  getContext("2d") 對象是內建的 HTML5 對象,擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
            var context=canvas.getContext("2d");
    
//      定義一個坐標點json對象數組,里面存儲,各個坐標點
   var tangram=[ 
       {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
      {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
      {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
      {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
      {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a54c09"},
      {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ccc"},
      {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}];
 
 //遍歷json數組

     for(var i=0;i<tangram.length;i++)
     {
        dram(tangram[i],context);
     }
 
 
        function dram(tangram,context){                     
             context.beginPath();
             context.moveTo(tangram.p[0].x,tangram.p[0].y);//定義開始繪制路徑
             for(var j=1;j<tangram.p.length;j++){
                context.lineTo(tangram.p[j].x,tangram.p[j].y);
             }          
             //它會嘗試用直線連接當前端點與起始端點來關閉路徑,但如果圖形已經關閉或者只有一個點,
             //它會什么都不做。這一步不是必須的。
             context.closePath();
             context.strokeStyle="black";//繪制線段的顏色
             context.lineWidth=5;//繪制線段的粗細
             context.fillStyle=tangram.color;//繪制填充顏色    
             context.stroke()//繪制邊框
             context.fill();//繪制填充圖形
        }       
        }
    </script>
    </body>
    
</html>

效果圖:

七巧板.png

6、繪制圓弧
方法:arc(x,y,radius,startAngle,endAngle,anticlockwise)
x,y:圓心位置
radius:半徑
startAnale:開始繪制圓弧點
endAngle:結束繪制圓弧點
anticlockwise:方向(布爾值,默認為順時針方向:true:逆時針;false:順時針)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body{
                background-color: black;
                margin: 10 auto;
                padding: 0 auto;
            }
            #canvas{
                margin: 200px;
                
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="1400" height="1200" style="border: 1px solid #c3c3c3;">
            您的瀏覽器不支持canvas,請升級瀏覽器!
        </canvas>

        <script>
        window.onload=function(){
            //canvas是采用JavaScript來獲取canvas元素
            var canvas =document.getElementById("canvas");      
            ////canvas的繪圖上下文環境
            //  getContext("2d") 對象是內建的 HTML5 對象,擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
            var context=canvas.getContext("2d");
            
            
            //1、繪制半圓,并填充顏色
            context.beginPath();//開始繪制
            context.strokeStyle="#caff67";
            context.arc(100,100,50,0,Math.PI,false);    
            context.closePath();
            context.fillStyle="#caff67";
            context.fill();
            context.stroke();
            
            
            //2、繪制多段圓弧,未使用closePath()
            var i=10;
            for(var j=0;j<i;j++){
                context.beginPath();
                context.strokeStyle="aqua";
                context.arc(200+120*j,200,50,0,2*Math.PI*(j+1)/10,false);
                context.stroke();
            }
            
            //3、繪制多段圓弧,使用closePath()
            //使用closePath(),把開始路徑點和結束路徑點,以線段連接起來
            var k=10;
            for(var j=0;j<k;j++){
                context.beginPath();
                context.strokeStyle="aqua";
                context.arc(200+120*j,500,50,0,2*Math.PI*(j+1)/10,false);
                context.closePath();
                context.stroke();
            }
            
            
        }
        </script>
    </body>
</html>

效果圖:

圓弧.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容