canvas筆記1

canvas 默認大小爲 300*150

通過 width="400" height="400" 可以改變大小

但是通過STYLE來改變話，會有問題 {width:600px; height:300px} 的話，畫布還是由300*150拉伸到600*300，所以裏面畫一個100*100，但因爲拉伸變成200*200

fill 填充

stroke描線

fillRect(L,T,W,H) 默認是黑色 L，T 起點座標，後面是寬高

strokeRect(L,T,W,H) 帶邊框的方塊黑色，1PX大小的邊框，但由於電腦原因，（50，50，100，100）5050左取半個像素，右取半個像素，所以左右會有一個像素，所以會變成兩像素的邊框 Rect(50.5,50.5,200,200)纔會變成一像素

lineWidth =10 邊框大小

角連接點 lineJoin: miter（直角） round（圓角） bevel(傾角)

        var oC=document.getElementById('c1');
        var oGC = oC.getContext('2d');  //目前只支持2D
        //oGC.fillStyle="red";
        oGC.fillStyle="blue";
        oGC.strokeStyle="red";
        oGC.lineWidth=10;
        oGC.lineJoin='round'
        oGC.fillRect(50,50,200,200);
        oGC.strokeRect(50,50,200,200);

繪製路徑

		oGC.beginPath();
		oGC.moveTo(100,100);
		oGC.lineTo(200,200);
		oGC.lineTo(300,200);
		oGC.closePath();  //起點到終點的閉合
		oGC.stroke();

        oGC.beginPath();
        oGC.moveTo(200,200);
        oGC.lineTo(300,300);
        oGC.lineTo(400,300);
        oGC.closePath();
        oGC.fillStyle='red'; //要寫在FILL前面，纔是紅色
        oGC.fill();

注意點，如果沒有BEGINPATH，後面的FILL對前面的圖形都產生效果。

繪製矩形 ( not fillRect) strokeRect , fillRect, clearRect, fillStyle, strokeStyle

		oGC.beginPath();
		oGC.rect(50,50,100,100)
		oGC.closePath();
		oGC.fill();// stroke()

清除畫布的一片矩形區域
oGC.clearRect(0,0,oC.width,oC.height)


save()保存路徑  restore()恢復路徑

// 如果沒有save restore fillStyle獎影響到下面的三角形，造成兩個都變紅。

        oGC.save()
        oGC.fillStyle='red'; 
        oGC.beginPath();
        oGC.moveTo(100,100);
        oGC.lineTo(200,200);
        oGC.lineTo(300,200);
        oGC.closePath();
        oGC.fill();
        oGC.restore();

        oGC.beginPath();
        oGC.moveTo(200,200);
        oGC.lineTo(300,300);
        oGC.lineTo(400,300);
        oGC.closePath();
        oGC.fill();

相當於，SAVE，是保存當前環境，然後接下來，你可以幹啥都行，如FILLSTYLE=“RED” 但只要 RESTORE，後，我還是還原回保存前的狀態

            window.οnlοad=function(){

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

            	oGC.fillStyle='red';

            	oGC.fillRect(100,100,200,200);

            	oGC.save();

            	oGC.fillStyle='green';

            	oGC.fillRect(300,300,200,200);

            	oGC.restore();

            	oGC.fillRect(0,0,50,50);
            }

這三個矩形是 紅 綠 ，紅，  因爲SAVE的關係，而不是紅 綠 綠。

線的端點 round square butt（默認，相當於沒啥變化） square 高度多出爲線寬一半的值

oGC.lineCap = 'square'; //' round square butt'

畫線功能

            window.οnlοad=function(){
            	var oC = document.getElementById('canvas');
            	var oGC = oC.getContext('2d');
                oC.οnmοusedοwn=function(ev){
                    oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
                    oC.οnmοusemοve=function(ev){
                        oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
                        oGC.stroke();
                    }

                    oC.οnmοuseup=function(ev){
                         oC.onmousemove = null;
                         oC.onmouseup = null;
                    }
                }
            }

  畫圓

          	oGC.moveTo(200,200);

            	//arc(起始位置X,起始位置Y,半徑,起始弧度,結束弧度,旋轉方向(順時針FALSE,逆時針TRUE)?)

            	oGC.arc(200,200,100,0,0.5*Math.PI,false);

            	oGC.stroke();
                <pre name="code" class="html">              //閉合 變成扇形  oGC.closePath();

畫一個圓弧<pre>context.arcTo(<em>x1</em>,<em>y1</em>,<em>x2</em>,<em>y2</em>,<em>r</em>);

兩個點，，再通過半徑R 確定一條弧，

相當於，先確認兩個點，再畫一個爲R的圓，圓心到兩個點的爲R

var oC=document.getElementById('c1');var oGC = oC.getContext('2d'); oGC.beginPath();oGC.moveTo(100,100)oGC.arcTo(300,100,300,200,100);oGC.stroke();

COPY一張圖

drawImage(image,x,y) 三個參數時， X表示繪畫X軸起點， Y 軸起點

drawImage(image,x,y，w,h) 五個時，w爲繪畫的寬度，H爲高度drawImage(image,x,y，w,h，tx,ty,tw,th) 九個時，爲源的X，Y起點，寬度，高度，繪畫的起點，寬度，高度

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html5實戰</title>
        <style>
            *{padding: 0; margin: 0;}
            body{background: #000;}
            canvas{background: #fff;}
        </style>
        <script>
            window.οnlοad=function(){
            	var oC = document.getElementById('canvas');
            	var oGC = oC.getContext('2d');
            	var oImg = document.querySelector('#pic');
            	oGC.drawImage(oImg,10,10,100,100)
               //oGC.drawImage(oImg,100,100,100,100,0,0,50,50)
 }

        </script>
    </head>
    <body>
    	<canvas id="canvas" width='400' height="400"></canvas>
    	<img id="pic" src="ball.png">
    </body>
</html>

陰影

與CSS3差不多，少了個擴展半徑

            	oGC.save();

            	oGC.shadowColor="rgba(0,0,0,.5)";

            	oGC.shadowOffsetX=10;

            	oGC.shadowOffsetY=2;

            	oGC.shadowBlur = 5;

            	oGC.fillStyle='green';

            	oGC.fillRect(110,110,200,100);

            	oGC.restore();
            	oGC.fillStyle='red';
            	oGC.fillRect(0,0,110,80);

漸變

var gradient  = oGC.createLinearGradient(0,40,0,70);

            	gradient.addColorStop(0,'red');

            	gradient.addColorStop(1,'green');
            	
            	oGC.fillStyle=gradient;

            	oGC.fillRect(0,0,199,100);

<pre name="code" class="html"><img src="https://img-blog.csdn.net/20150605082006184?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWFnaWNmbHk5NTI3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="100" height="50" alt="" />

createLinearGradient 會返回一個canvasGradient的實例，其下有addColorStop的方法，  至於，漸變走向問題，參考，<pre name="code" class="html"> oGC.createLinearGradient(0,40,0,70);  參數表示起點XY，和終點XY

注意，如果漸變的座標，和FILLRECT的座標，沒有發生重合部分，就看不到漸變效果的

createRadialGradient 漸變，oGC.createRadialGradient(x1,y1,r1,x2,y2,r2);

                var gradient  = oGC.createRadialGradient(200,200,100,200,200,200);

                gradient.addColorStop(0,'red');

                gradient.addColorStop(0.5,'blue');

                gradient.addColorStop(0.8,'green');

                oGC.fillStyle=gradient;

                oGC.arc(200,200,200,0,2*Math.PI);

                oGC.fill();

quadraticCurveTo()

context.quadraticCurveTo(cpx,cpy,x,y);

方法通過使用表示二次貝塞爾曲線的指定控制點，向當前路徑添加一個點。

提示：二次貝塞爾曲線需要兩個點。第一個點是用於二次貝塞爾計算中的控制點，第二個點是曲線的結束點。曲線的開始點是當前路徑中最後一個點。如果路徑不存在，那麼請使用beginPath() 和moveTo() 方法來定義開始點。

oGC.moveTo(100,200);

oGC.quadraticCurveTo(120,120,200,100);

oGC.stroke();

bezierCurveTo() 方法通過使用表示三次貝塞爾曲線的指定控制點，向當前路徑添加一個點。

提示：三次貝塞爾曲線需要三個點。前兩個點是用於三次貝塞爾計算中的控制點，第三個點是曲線的結束點。曲線的開始點是當前路徑中最後一個點。如果路徑不存在，那麼請使用beginPath() 和moveTo() 方法來定義開始點。

	oGC.moveTo(100,200);

            	oGC.bezierCurveTo(120,120,180,180,200,100);

            	oGC.stroke();

</pre><p></p><p>canvas 變形  translate rotate scale</p><p><pre>context.translate(<em>x</em>,<em>y</em>);

translate() 方法重新映射畫布上的 (0,0) 位置。 

oGC.translate(100,50);

oGC.fillRect(0,0,200,100);

<pre>oGC.translate(100,50); 相當於把畫布的0，0 座標，偏移到100，50上，再畫一個矩形

<pre>oGC.rotate(Math.PI/4) 以左上角旋轉45度

oGC.scale(0.5,0.5) 以左上角，寬，高縮放

注意點

oGC.rotate  會累加，

oGC.rotate(Math.PI/4)

oGC.rotate(Math.PI/4)
實際旋轉爲90度，所以解決方法是。。用SAVE（），RESTORE()來保存

用畫布畫一個變大變小旋轉的方塊

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html5實戰</title>
        <style>
            *{padding: 0; margin: 0;}
            body{background: #000;}
            canvas{background: #fff;}
        </style>
        <script>
            window.οnlοad=function(){
            	var oC = document.getElementById('canvas');
            	var oGC = oC.getContext('2d');

            	var num = 0;

            	var value=1;

            	var num2=0;

            	oGC.fillStyle="green";

            	setInterval(function(){

            		if(num2==100){

            			value=-1;

            		}else if(num2==0){

            			value=1;
            		}

            		num++;

            		num2+=value;

            		oGC.save();

            		oGC.clearRect(0,0,oC.width,oC.height)

            		oGC.translate(100,100);

	            	oGC.rotate(num*Math.PI/180);

	            	oGC.scale(num2/50,num2/50)

	            	oGC.translate(-50,-50);

	            	oGC.fillRect(0,0,100,100);

	           	oGC.restore();

            	},30)

            }

        </script>
    </head>
    <body>


注意點，正常情況下，旋轉是基於0 0 旋轉的。。所以如果要矩形環繞左上角旋轉，要translate(200,200); rotate();  oGC.fillRect(0,0,100,100);


如果要矩形環繞它中心旋轉，剛加句 <pre name="code" class="html">translate(200,200);  rotate()  translate(-50,-50);  oGC.fillRect(0,0,100,100);  

原理和絕對定位居中原理差不多，把它旋轉後的位置，再平移物體的寬度高度負一半。然後看起來就像在中心旋轉

createPattern 背景填充

var bg = oGC.createPattern(yImg,'repeat');  有repeat x-repeat y-repeat no-repeat

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html5實戰</title>
        <style>
            *{padding: 0; margin: 0;}
            body{background: #000;}
            canvas{background: #fff;}
        </style>
        <script>
            window.οnlοad=function(){
                var yImg = new Image();
                yImg.οnlοad=function(){
                    var oC = document.getElementById('canvas');
                    var oGC = oC.getContext('2d');
                    var bg = oGC.createPattern(yImg,'repeat');
                    oGC.fillStyle=bg;
                    oGC.fillRect(0,0,400,400)
                }
                yImg.src= '1.png';
            }
        </script>
    </head>
    <body>
    <canvas id="canvas" width="400" height="400"> </canvas>
    </body>
</html>

用CANVAS實現微博圖片旋轉效果，注意點:旋轉出去了,要通過DRAWIMAGE的座標點定位回來,也可以ROTATE前,用TRANSLATE定位

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html5實戰</title>
        <style>
            *{padding: 0; margin: 0;}
            body{background: #000;}
            canvas{background: #fff;}
        </style>
        <script>
            window.οnlοad=function(){
                var aInput = document.getElementsByTagName('input');

                var oImg = document.getElementById('img1');

                var yImg = new Image();

                var iNow = 0;

                yImg.οnlοad=function(){

                    draw(oImg);
                }

                yImg.src= oImg.src;
                function draw(obj){
                    var oC = document.createElement('canvas');
                    var oGC = oC.getContext('2d');
                    oC.width = obj.width;
                    oC.height = obj.height;
                    oGC.drawImage(obj,0,0);
                    obj.parentNode.replaceChild(oC,obj);
                    aInput[1].onclick = function(){
                        
                        if(iNow==3){
                            iNow = 0;
                        }
                        else{
                            iNow++;
                        }
                        toChange();
                        
                    };

                    aInput[0].onclick = function(){
                        
                        if(iNow==0){
                            iNow = 3;
                        }
                        else{
                            iNow--;
                        }
                        toChange();
                        
                    };

                    function toChange(){

                        switch(iNow) {
                            case 1:
                                oC.height = obj.width;

                                oC.width = obj.height;
                                
                                oGC.rotate(90*Math.PI/180);

                                oGC.drawImage(obj,0,-obj.height);
                                
                                break;
                            case 2:

                                oC.height = obj.height;

                                oC.width = obj.width;
                                
                                oGC.rotate(180*Math.PI/180);

                                oGC.drawImage(obj,-obj.width,-obj.height);
                                
                                break;

                            case 3:

                                oC.height = obj.width;

                                oC.width = obj.height;
                                
                                oGC.rotate(270*Math.PI/180);

                                oGC.drawImage(obj,-obj.width,0);
                                break;

                            case 0 :
                                oC.height = obj.height;

                                oC.width = obj.width;
                                
                                oGC.rotate(0);

                                oGC.drawImage(obj,0,0);

                                break;

                        }



                    }
                    
                }

            }
        </script>
    </head>
    <body>
        <input type="button" value="prev">
        <input type="button" value="next">


    	<div >
            <img src="1.png" id="img1">  
        </div>


    </body>
</html>

magicfly9527

發佈了58 篇原創文章 · 獲贊 4 · 訪問量 5萬+

私信關注

CDN--前端性能優化

xss攻擊原理

github生成個公鑰

html5media.js讓所有瀏覽器支持video標籤

domReady方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結