canvas繪製路徑

時間 2019-11-16

標籤 canvas 繪製路徑简体版

原文原文鏈接

2.畫布api
canvas.getContext("2d");
canvas.width
canvas.heightjavascript

               var ctx = canvas.getContext("2d");
                canvas.width=552;
                canvas.height=800;

3.上下文api
ctx.fillRect(x,y,w,h):填充矩形
ctx.strokeRect(x,ymwmh):帶邊框的矩形
ctx.clearRect(0,0,oc.width,oc.height):清除整個畫布
注意原點的位置
ctx.fillStyle
ctx.strokeStyle
ctx.lineWidthcss

                var ctx=canvas.getContext("2d");
                    
                //設置圖形的填充顏色               
                 
                    ctx.fillStyle = "blue";
                    //實心矩形
                   
                ctx.fillRect(0,0,100,100)
                //設置圖形輪廓的顏色
                 ctx.strokeStyle = "blue";
                //帶邊框的矩形  
                // 100    : 99.5 --- 100.5(99-101)
                // 100.5: 100  --- 101 
                ctx.strokeRect(100.5,100.5,100,100)

ctx.lineCaphtml

CanvasRenderingContext2D.lineCap 是 Canvas 2D API 指定如何繪製每一條線段末端的屬性。有3個可能的值，分別是：butt, round and square。默認值是 butt。java

ctx.lineCap = "butt";
ctx.lineCap = "round"; ctx.lineCap = "square";

<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();
      </script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
         
    
         html,body{
                height: 100%;
                overflow: hidden;
                
            }
            body{
                background: greenyellow;
            }
          #test{
               position: absolute;
               top: 0;
               left: 0;
               right: 0;
               bottom:0;
               margin: auto;
           background: gray;

              
          }
        </style>
    </head>
    <body>
        <canvas id="test" width="300" height="300">
            <span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
        </canvas>
    </body>
      <script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();
      </script>
</html>

View Code

ctx.lineJoincanvas

Canvas 2D API 用來設置2個長度不爲0的相連部分（線段，圓弧，曲線）如何鏈接在一塊兒的屬性（長度爲0的變形部分，其指定的末端和控制點在同一位置，會被忽略）api

ctx.lineJoin = "bevel";
ctx.lineJoin = "round"; ctx.lineJoin = "miter";

      <script type="text/javascript">
var canvas = document.getElementById("test");
var ctx = canvas.getContext("2d");


ctx.lineWidth = 10;
ctx.lineJoin = "round";
//清楚子路徑列表,開始新路徑
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(200, 100);
ctx.lineTo(300,0);
ctx.stroke();
      </script>
</html>

ctx.moveTo(x,y):將畫筆擡起點到x，y處
ctx.lineTo(x,y):將畫筆移到x，y處
ctx.rect(x,y,w,h)
ctx.arc(x,y,r,degS,degE,dir)
ctx.arcTo(x1,y1,x2,y2,r):2個座標，一個半徑
結合moveTo(x,y)方法使用，
x,y:起始點
x1,y1：控制點
x2,y2：結束點
ctx.quadraticCurveTo(x1,y1,x2,y2)
結合moveTo(x,y)方法使用，
x,y:起始點
x1,y1：控制點
x2,y2：結束點
必須通過起點和終點
ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3)
結合moveTo(x,y)方法使用，
x,y:起始點
x1,y1：控制點
x2,y2：控制點
x3，y3：結束點
必須通過起點和終點
ctx.fill()
ctx.stroke()

ctx.beginpath():清除路徑容器瀏覽器

ctx.strokeStyle="red";
                ctx.lineWidth="3";
                ctx.moveTo(450,250);
                ctx.lineTo(550,50);
                ctx.lineTo(300,200);
                //繪製線段
                ctx.stroke();
                //閉合路徑
                 ctx.closePath();
                 //充填內部
                 ctx.fill();

ctx.closepath():閉合路徑
fill自動閉合ide

stroke須要手動閉合spa

ctx.save()
將畫布當前狀態(樣式相關變換相關)壓入到樣式棧中rest

ctx.restore()
將樣式棧中棧頂的元素彈到樣式容器中
圖像最終渲染依賴於樣式容器

ctx.save();
                //關於樣式的設置
                //save  restore成對出現
                ctx.beginPath();
                //關於路徑
                ctx.restore();
                
                
                ctx.save();
                //關於樣式的設置
                ctx.beginPath();
                //關於路徑
                
                ctx.fill();
                ctx.restore();

ctx.translate(x,y):將原點按當前座標軸位移x，y個單位 ctx.rotate(弧度):將座標軸按順時針方向進行旋轉 ctx.scale(因子): 放大：放大畫布，畫布中的一個css像素所佔據的物理面積變大，畫布中包含的css像素的個數變少畫布中圖像所包含的css像素的個數不變縮小：縮小畫布，畫布中的一個css像素所佔據的物理面積變小，畫布中包含的css像素的個數變多畫布中圖像所包含的css像素的個數不變

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。