canvas筆記

簡介

  • canvas標簽定義圖形，比如圖表，和其他圖像。
  • canvas標簽只是圖形容器，必須使用腳本來繪制圖形。
  • canvas有兩個方向的軸，x和y軸，（0,0）點默認為左上角

canvas常用一些屬性和方法

width和height

canvas寬度和高度，都直接在標簽上設(shè)置，如果在css樣式中設(shè)置，顯現(xiàn)出來的高度和寬度可能不是設(shè)置的。
canvas有默認用默認的寬度和高度，300px

<canvas id="canvas" width="500" height="500">您的瀏覽器不支持canvas請升級最新版本</canvas>

標簽中的文字只有在瀏覽器不支持canvas時才會顯示

getContext()

大多數(shù)canvas繪圖API都沒有定義在canvas元素本身上，而是定義在通過畫布的getContext（）方法獲得的一個“繪圖環(huán)境”上。

    var ctx = document.getElementById('canvas');
    ctx.getContext('2d');

beginPath()

開始繪制

ctx.beginPath();

moveTo(x,y)

設(shè)置繪制的起點
有兩個參數(shù)：參數(shù)1：x軸方向的數(shù)值；參數(shù)2：y軸方向的數(shù)值。

ctx.moveTo（0,0);

lineTo(x,y)

繪制后續(xù)的點,后續(xù)點可以有多個
有兩個參數(shù)：參數(shù)1：x軸方向的數(shù)值；參數(shù)2:y軸方向的數(shù)值。

ctx.lineTo(250,250);
ctx.lineTo(500,0);

closePath()

關(guān)閉路徑，把終點和起點連接起來；不需要把終點和起點連接時可以不寫。

ctx.closePath();

stroke()，fill()

stroke描邊
fill填充
改變邊線的顏色
ctx.strokeStyle = 'red';
改變填充的顏色
ctx.fillStyle = 'green';

lineWidth

設(shè)置邊線的寬度，寬度以邊線為中心向兩邊平分
ctx.lineWidth = 5;

繪制矩形

使用stroke繪制矩形: ctx.storkeRect(x,y,w,h);
繪制有填充顏色的矩形：ctx.fillRect(x,y,w,h);

設(shè)置圓角

對線的尾部進行圓角設(shè)置（必須關(guān)閉closePath）
ctx.lineCap='round';

設(shè)置線的交匯處進行圓角處理
ctx.lineJoin='round';

繪制字體

設(shè)置字體大小和字體類型
ctx.font='50px 黑體';

繪制文字（文字默認是基線對齊）
設(shè)置水平對齊方式
ctx.textAline='right';
設(shè)置垂直對齊方式
ctx.textBaseline='bottom';
storkeText()繪制字體
ctx.strokeText('Hello,World',100,100);
fillText()繪制字體
ctx.fillText('Hello,World',100,300,100);

繪制圓

/*
    參數(shù)1：圓心的x
    參數(shù)2：圓心的y
    參數(shù)3：圓的半徑
    參數(shù)4：起點的位置，根據(jù)右側(cè)和設(shè)置的弧度制找到起點
    參數(shù)5：終點的位置，根據(jù)右側(cè)和設(shè)置的弧度制找到終點
    參數(shù)6：繪制的方向，true代表逆時針，false代表順時針
    在這個里面的弧度用Math.PI表示。 Math.PI/2 代表90度；
    設(shè)置度用 n*Math.PI/180  n為要設(shè)置的度數(shù)
*/
ctx.arc(250,250,200,Math.PI,Math.PI/2,false);
ctx.stroke();

繪制二次貝塞爾曲線和三次貝塞爾曲線

//繪制曲線(二次貝塞爾曲線)
//使用moveTo放置起點，
//使用quadraticCurveTo()放置基準點和終點
//參數(shù)1：基準點的x
//參數(shù)2：基準點的y
//參數(shù)3：終點的x
//參數(shù)4：終點的y

ctx.moveTo(0,0);
ctx.quadraticCurveTo(250,500,500,0);
ctx.stroke();


//繪制曲線(三次貝塞爾曲線)
//參數(shù)1: 基準點1的x
//參數(shù)2: 基準點1的y
//參數(shù)3: 基準點2的x
//參數(shù)4: 基準點2的y
//參數(shù)5: 終點點1的x
//參數(shù)6: 終點點1的y

ctx.moveTo(0,0);
ctx.bezierCurveTo(500,0,0,500,500,500);
ctx.stroke();

畫圖像img

//如果想把圖像畫到canvas中，需要先創(chuàng)建image對象
var img=new Image();
img.src='images/1.jpg';

img.onload=function (){
    //必須等圖片加載完成之后，才可以進行繪制
    /*
    參數(shù)：參數(shù)1：img;
    參數(shù)2：x；
    參數(shù)3：y；
    參數(shù)4：寬度width；
    參數(shù)5：高度height；
    參數(shù)6：圖片上的要顯示的起點x；
    參數(shù)7：圖片上的要顯示的起點y；
    參數(shù)8：圖片上以起點開始要顯示的寬度width；
    參數(shù)9：圖片上以起點開始要顯示的高度height；
    */
    // ctx.drawImage(img,10,10);
    // ctx.drawImage(img,10,10,200,200);
    ctx.drawImage(img,10,10,200,200,100,100,200,200);
}

清除畫布

畫布的清除一般在做動畫時使用

//清除畫布
//四個參數(shù)：x,y,w,h
// ctx.clearRect(10,10,200,200);

坐標系移動

ctx.translate(x,y);

坐標系旋轉(zhuǎn)

坐標系的旋轉(zhuǎn)以（0,0）原點為中心

ctx.rotate(Math.PI/6);

簡單示例：

時鐘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background: #000;
        }
        canvas{
            background: #fff;
        }
    </style>
</head>
<body>
    <canvas id="cc" width="400px" height="400px"></canvas>
    <script>
         var cc = document.getElementById('cc');
         var ctx = cc.getContext('2d');

         function time(){
            var x = 200;
            var y = 200;
            var r = 150;

            var oDate = new Date();
            var hours = oDate.getHours();
            var minutes = oDate.getMinutes();
            var seconds = oDate.getSeconds();

            var hValue = (-90 + hours * 30 + minutes/2)*Math.PI/180;
            var mValue = (-90 + minutes * 6)*Math.PI/180;
            var sValue = (-90 + seconds * 6)*Math.PI/180;

            ctx.beginPath();
            for(var i=0; i<60 ; i++){
                ctx.moveTo(x,y);
                ctx.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
            }
            ctx.closePath();
            ctx.stroke();

            //蓋圓盤

            ctx.fillStyle = '#fff';
            ctx.beginPath();
            ctx.moveTo(x,y);
            ctx.arc(x,y,r*18/20,0,Math.PI*2,false);
            ctx.closePath();
            ctx.fill();

            //時
            ctx.lineWidth = 3;
            ctx.beginPath();
            for(var i=0; i<12 ; i++){
                ctx.moveTo(x,y);
                ctx.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
            }
            ctx.closePath();
            ctx.stroke();

            //蓋圓盤
            ctx.fillStyle = '#fff';
            ctx.beginPath();
            ctx.moveTo(x,y);
            ctx.arc(x,y,r*16/20,0,Math.PI*2,false);
            ctx.closePath();
            ctx.fill();

            //時針
            ctx.lineWidth = 5;
            ctx.beginPath();
            ctx.moveTo(x,y);
            ctx.arc(x,y,r*8/20,hValue,hValue,false);
            ctx.closePath();
            ctx.stroke();
            //分針
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.moveTo(x,y);
            ctx.arc(x,y,r*14/20,mValue,mValue,false);
            ctx.closePath();
            ctx.stroke();

            //秒針
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(x,y);
            ctx.arc(x,y,r*16/20,sValue,sValue,false);
            ctx.closePath();
            ctx.stroke();
         }

         setInterval(time,1000);

    </script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容