Canvas繪圖基礎知識

一、繪製直線

1.準備"畫布"，畫布默認大小是300px*150px

<canvas width="600" height="400" ></canvas>
<!--注意:對畫布設置寬高只能在行內設置，不在css中設置-->

2.獲取元素並繪製一條簡單的直線

<script>
    /*1.獲取元素*/
    var myCanvas = $('canvas')[0];
    /*2.獲取上下文 繪製工具箱 */
    /*是否有3d 暫時沒有*/
    var ctx = myCanvas.getContext('2d'); /*web gl 繪製3d效果的網頁技術*/
    /*3.移動畫筆*/
    ctx.moveTo(100,100);
    /*4.繪製直線 (軌跡，繪製路徑)*/
    ctx.lineTo(500,100);
    /*5.描邊*/
    ctx.stroke();
</script>

3.和線相關的屬性和方法

	var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');
    
    ctx.beginPath();/*開啓新路徑*/
    ctx.closePath();//閉合路徑
    ctx.stroke();//描邊
    ctx.fill();//填充
    ctx.strokeStyle = 'blue';//設置描邊的顏色
    ctx.fillStyle = 'red';//設置填充的顏色
    ctx.lineWidth = 10;//設置線的寬度
   	ctx.lineCap = 'square';//設置線兩邊的樣式，有butt(默認)、round、square這幾個屬性
 	ctx.lineJoin = 'bevel';//設置相交線的拐點樣式，不常用

二、繪製虛線和矩形

1.繪製虛線

	ctx.moveTo(100,100.5);
    ctx.lineTo(300,100.5);
    //要繪製虛線先畫一條實線，然後擦掉部分實線即是虛線
    
	ctx.setLineDash([20]);//這個數組是用來描述實線和虛線的排列方式的
    ctx.getLineDash();//獲取虛線的排列方式
    ctx.lineDashOffset = 30;//設置虛線的偏移（前後移動）
    
    ctx.stroke();//描邊

2.繪製矩形

	ctx.rect(100,100,100,100);//四個參數分別是x,y,w,h
	//用rect方法是繪製矩形路徑，不是獨立路徑，需要描邊或填充才能看到矩形
    ctx.stroke();
    ctx.fill();


	ctx.strokeRect(100,100,200,100);
    ctx.fillRect(100,100,200,100);
    //用這種方法是繪製矩形，有獨立路徑，不需要描邊或填充
	
	ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);//清除矩形內容

3.繪製顏色漸變的矩形

    var linearGradient = ctx.createLinearGradient(0,0,0,600);
    /*創建一個漸變的方案*/
    /*漸變是由長度的*/
    /*x0y0起始點,x1y1結束點  確定長度和方向*/
    /*通過兩個點的座標可以控制 漸變方向*/
    linearGradient.addColorStop(0,'pink');//設置漸變的顏色
    linearGradient.addColorStop(1,'blue');//設置漸變的顏色
	
    ctx.fillStyle = linearGradient;//設置填充矩形的方式爲漸變

    ctx.fillRect(0,0,600,400);//填充矩形

三、繪製曲線和文字

1.繪製曲線

	/*1.體驗曲線的繪製*/
    /*2.線是由點構成的*/
    /*3.曲線都是由數學公式得來*/

    for(var i = 1 ; i < 600 ; i ++){
        var x = i;
        var y = 50*Math.sin(x) + 100;
        ctx.lineTo(x,y);
    }
    ctx.stroke();

2.繪製圓弧

	/*繪製圓弧*/
    /*確定起始繪製的位置和結束繪製的位置，確定弧的長度和位置，startAngle，endAngle，弧度*/
    /*取得繪製的方向:direction 默認是順時針(false)，逆時針(true) */

    /*在中心位置畫一個半徑150px的圓弧左下角*/
    var w = ctx.canvas.width;
    var h = ctx.canvas.height;
    ctx.arc(w/2,h/2,150,Math.PI/2,Math.PI,true);
    //參數分別爲x,y,r,起點,終點,繪製方向
    //對於一個圓來說，最高點是3π/2，最低點是π/2，與圓心在同一高度的右邊是0
    ctx.stroke();

3.繪製扇形

	/*在中心位置畫一個半徑150px的圓弧右上角 扇形  邊  填充 */
    var w = ctx.canvas.width;
    var h = ctx.canvas.height;
    /*把起點放到圓心位置*/
    ctx.moveTo(w/2,h/2);
    ctx.arc(w/2,h/2,150,0,-Math.PI/2,true);
    ctx.fill();

	//注意：必須先把畫筆移到圓心位置，填充出來的纔是一個扇形

4.繪製文字

	/*注意：起點位置在文字的左下角*/
   
    ctx.font = '40px Microsoft YaHei';//設置文字的大小和字體風格
    ctx.textAlign = 'center'; /*左右對齊方式:(center left right start end) 基準是起始座標*/
    ctx.textBaseline = 'middle';/*垂直對齊的方式:baseline(top,bottom,middle) 基準是起始座標*/
    ctx.direction = 'rtl';//rtls是right to left;ltr是left to right
    ctx.strokeText(str,x0,y0);//描邊
    ctx.fillText(str,x0,y0);//填充
    ctx.measureText(str).width;/*獲取文本的寬度*/

四、繪製圖片和座標轉換

1.繪製圖片

一共有三種方法：

<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*創建對象*/
    var image = new Image();
    image.onload = function () {
       
    	/*3參數*/
        /*圖片對象,x,y*/
        ctx.drawImage(image,100,100);


        /*5個參數*/
        /*圖片對象*/
        /*繪製在畫布上的座標 x y*/
        /*是圖片的大小,不是裁剪,是縮放*/
        ctx.drawImage(image,100,100,100,100);


        /*9個參數*/
        /*圖片對象*/
        /*圖片上定位的座標  x y */
        /*在圖片上截取多大的區域  w h*/
        /*繪製在畫布上的座標 x y*/
        /*是圖片的大小,不是裁剪,是縮放*/
        ctx.drawImage(image,400,400,400,400,200,200,100,100);

    };
    /*設置圖片路徑*/
    image.src = 'image/02.jpg';
 </script>

2.座標轉換

	ctx.translate(100,100);//把canvas座標的x,y軸都向正方向移動100px
    ctx.scale(0.5,1);//把canvas座標的x座標縮小一半，y軸不變
    ctx.rotate(Math.PI/6);//把canvas座標旋轉一定的角度