canvas繪製線和矩形

時間 2019-11-16

標籤 canvas 繪製矩形简体版

原文原文鏈接

###canvas繪製矩形
HTML中的元素canvas只支持一種原生的圖形繪製：矩形。全部其餘的圖形的繪製都至少須要生成一條路徑javascript

1.繪製矩形
canvas提供了三種方法繪製矩形：
---->繪製一個填充的矩形（填充色默認爲黑色）
fillRect(x, y, width, height)
---->繪製一個矩形的邊框（默認邊框爲:一像素實心黑色）
strokeRect(x, y, width, height)
---->清除指定矩形區域，讓清除部分徹底透明。
clearRect(x, y, width, height)

x與y指定了在canvas畫布上所繪製的矩形的左上角（相對於原點）的座標。
width和height設置矩形的尺寸。（存在邊框的話，邊框會在width上佔據一個邊框的寬度，height同理）

2.strokeRect時，邊框像素渲染問題
按理渲染出的邊框應該是1px的，
canvas在渲染矩形邊框時，邊框寬度是平均分在偏移位置的兩側。
context.strokeRect(10,10,50,50)
:邊框會渲染在10.5 和 9.5之間,瀏覽器是不會讓一個像素只用本身的一半的
至關於邊框會渲染在9到11之間
context.strokeRect(10.5,10.5,50,50)
:邊框會渲染在10到11之間

3.添加樣式和顏色
fillStyle :設置圖形的填充顏色。css

strokeStyle :設置圖形輪廓的顏色。
默認狀況下，線條和填充顏色都是黑色（CSS 顏色值 #000000）
lineWidth : 這個屬性設置當前繪線的粗細。屬性值必須爲正數。
描述線段寬度的數字。 0、負數、 Infinity 和 NaN 會被忽略。
默認值是1.0。html

<!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">
          window.onload=function(){
          
            var canvas = document.querySelector("#test");

          
          
            if(canvas.getContext){
                
       
                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.clearRect(50,50,100,100)
                
            }
          }

      </script>
</html>

View Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
                overflow: hidden;
            }
            body{
                background: pink;
            }
            #test{
                background: gray;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <canvas id="test" width="300" height="300">
            <span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
        </canvas>
    </body>
    <script type="text/javascript">
        window.onload=function(){
            //querySelector身上有坑
            //拿到畫布
            var canvas = document.querySelector("#test");
            if(canvas.getContext){
                var ctx = canvas.getContext("2d");
//                設置圖形輪廓的顏色。
                ctx.strokeStyle="pink";
//                設置圖形的填充顏色。
                ctx.fillStyle="green";
//                   覆蓋渲染
                ctx.lineWidth=10;
                
                ctx.moveTo(100,100);
                ctx.lineTo(50,200);
                ctx.lineTo(150,80);
                ctx.lineTo(150,100);
                    
//                ctx.moveTo(200,200);
                ctx.lineTo(200,200);
                ctx.lineTo(200,300);
                //描邊的線
                ctx.stroke();
                
            }
        }
        
        
    </script>
</html>

View Code

4.lineWidth & 覆蓋渲染java

<script type="text/javascript">
        window.onload=function(){
            //querySelector身上有坑
            //拿到畫布
            var canvas = document.querySelector("#test");
            if(canvas.getContext){
                var ctx = canvas.getContext("2d");
//                設置圖形輪廓的顏色。
                ctx.strokeStyle="pink";
//                設置圖形的填充顏色。
                ctx.fillStyle="green";
//                   覆蓋渲染
                ctx.lineWidth=10;
                
                ctx.moveTo(100,100);
                ctx.lineTo(50,200);
                ctx.lineTo(150,80);
                ctx.lineTo(150,100);
                    
//                ctx.moveTo(200,200);
                ctx.lineTo(200,200);
                ctx.lineTo(200,300);
                //描邊的線
                ctx.stroke();
                
            }
        }
        
        
    </script>

5.lineJoin
設定線條與線條間接合處的樣式（默認是 miter）
round : 圓角
bevel : 斜角
miter : 直角
canvas

相關標籤/搜索

每日一句

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