HTML5系列之canvas用法

zhouzhou發表於2019-02-16
HTMLCanvas

html：

<canvas id="canvas" width="500px" height="500px"></canvas>

Js：

var can = document.getElementById("canvas");
if(can.getContext){
    var ctx=can.getContext("2d");
    //實心矩形(起點座標,寬和長)
    ctx.fillStyle="red";
    ctx.fillRect(300,300,50,50);
    
    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);

    //設定透明度
    //ctx.globalAlpha=0.8;

    //建立路徑,描邊圓形(圓心,半徑,角度,方向)
    ctx.beginPath(); //新建一個起點
    ctx.arc(200,200,50,0,Math.PI*2,true);
    ctx.stroke();

    //建立路徑(三角形)
    ctx.fillStyle="rgba(0,0,200,0.5)";
    ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(120,100);
    ctx.lineTo(100,120);
    ctx.fill();

    //二次貝塞爾(控制點,結束點)
    ctx.beginPath();
    ctx.moveTo(75,25);
    ctx.quadraticCurveTo(25,25,25,62.5);
    ctx.quadraticCurveTo(25,100,50,100);
    ctx.stroke();

    //三次貝塞爾(控制點1,,控制點2,結束點)
    ctx.beginPath();
    ctx.moveTo(75,40);
    ctx.bezierCurveTo(75,37,70,25,50,25);
    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
    ctx.stroke();

    //Path2D 儲存路徑
    var bb=new Path2D();
    bb.rect(70,70,30,30);
    ctx.fill(bb);
    var cc=new Path2D(bb);
    ctx.fill(cc);

    //SVG paths
    var dd=new Path2D("M10 10 H80 V80 H-80 Z");
    ctx.strokeStyle="pink";
    ctx.stroke(dd);*/
    
    //linewidth設定線寬
    for(var i=0; i<10; i++){
        ctx.lineWidth=i+1;
        ctx.beginPath();
        ctx.moveTo(5 + i * 10, 5);
        ctx.lineTo(5+i*10,150);
        ctx.stroke();
    }

    //linecap設定線條末端樣式
    var linecap=["butt","round","square"];
    ctx.strokeStyle="green";
    for(var i=0;i<linecap.length;i++){
        ctx.lineWidth=10;
        ctx.lineCap=linecap[i];
        ctx.beginPath();
        ctx.moveTo(150+i*20,10);
        ctx.lineTo(150+i*20,150);
        ctx.stroke();
    }

    //lineJoin設定線條接合處樣式
    var linejoin=["round","bevel","miter"];
    ctx.strokeStyle="gold";
    for(var i=0;i<linecap.length;i++){
        ctx.lineWidth=10;
        ctx.lineJoin=linejoin[i];
        ctx.beginPath();
        ctx.moveTo(300,10+i*20);
        ctx.lineTo(350,50+i*20);
        ctx.lineTo(400,10+i*20);
        ctx.lineTo(450,50+i*20);
        ctx.lineTo(500,10+i*20);
        ctx.stroke();
    }

    //miterLimit設定相交最大長度
    var miterlimit=["round","bevel","miter"];
    ctx.strokeStyle="green";    
        ctx.lineWidth=10;
        ctx.miterLimit=1;
        ctx.beginPath();
        ctx.moveTo(300,100);
        ctx.lineTo(350,150);
        ctx.lineTo(400,100);
        ctx.lineTo(450,150);
        ctx.lineTo(500,100);
        ctx.stroke();

    //setLineDash lineDashOffset設定虛線
    var offset=0;
    function draw(){
        offset=offset+3;
        ctx.clearRect(0,0,canvas.width, canvas.height);
        ctx.setLineDash([4,6]);  //接收陣列
        ctx.lineDashOffset= -offset;
        ctx.strokeRect(10,20,200,200);
        if(offset>20){
            offset=0;
        }
    }
    setInterval(draw,200);

    //linearGradient線性漸變
    var fff=ctx.createLinearGradient(100,100,50,150); //漸變的起點和終點
    fff.addColorStop("0","black");
    fff.addColorStop("1","red");
    ctx.fillStyle=fff;
    ctx.fillRect(10,100,50,150);*/

    //radialgradient/radgrad徑向漸變
    /*var ggg=ctx.createRadialGradient(100,150,30,100,150,50); //圓心,半徑/圓心,半徑
    ggg.addColorStop("0","black");
    ggg.addColorStop("0.9","red");
    ggg.addColorStop(1,`rgba(1,159,98,0)`);
    ctx.fillStyle=ggg;
    ctx.fillRect(50,100,100,100);

    //建立新圖案,用圖案填充
    var img= new Image();
    img.src="images/4.png"; //不可放在後面
    img.onload=function(){
        var ppr=ctx.createPattern(img,"no-repeat");
        ctx.fillStyle=ppr;
        ctx.fillRect(300,200,50,50);
     }
    
    //建立文字陰影效果
    ctx.shadowOffsetX= 2;
    ctx.shadowOffsetY= 2;
    ctx.shadowBlur= 5;
    ctx.shadowColor= "red";
    ctx.font="20px `楷體`";
    ctx.fillText("哈哈",100,50);  //填充字型(座標)  

    //填充規則
    ctx.beginPath();
    ctx.moveTo(250,200);
    ctx.arc(200,200,50,0,Math.PI*2,true);
    ctx.arc(200,200,30,0,Math.PI*2,true);
    ctx.fill("evenodd");  //預設值`nonzero`

    //繪製文字(描邊文字)
    ctx.shadowOffsetX= 2;
    ctx.shadowOffsetY= 2;
    ctx.shadowBlur= 5;
    ctx.shadowColor= "red";
    ctx.font="50px `楷體`";
    ctx.strokeText("嘻嘻",100,50);

    //基線校準
    ctx.font="50px serif";
    ctx.textAlign="left";
    ctx.textBaseline="top";
    ctx.strokeText("hello",100,50);

    //應用影像
    var img= new Image();
    img.src="images/4.png";
    img.onload=function(){
        ctx.drawImage(img,50,50);//座標
        ctx.beginPath();
        ctx.moveTo(100,100);
        ctx.lineTo(120,100);
        ctx.lineTo(100,120);
        ctx.fill();
    }

    //縮放影像
    var img= new Image();
    img.src="images/4.png";
    img.onload=function(){
        for(var i=0;i<4;i++){
            for(var j=0;j<4;j++){
                ctx.drawImage(img,j*60,i*60,60,60);  //座標,圖片的大小
            }
        }
    }

    //切片
    var img1= new Image();
    img1.onload=function(){
        //所切圖片的切片位置和大小,目標顯示位置和大小
        ctx.drawImage(img1,250,250,200,200,0,0,100,100);
        }
    img1.src="images/1.png"; //可以放在後面,可識別
    var img2= new Image();
    img2.src="images/2.png";
    img2.onload=function(){
        //所切圖片的切片位置和大小,目標顯示位置和大小
        ctx.drawImage(img2,250,250,500,500,10,10,80,80);
     }

     //儲存(屬性)與還原 save,restore與棧相似
    　ctx.fillRect(0,0,150,150);   // Draw a rectangle with default settings
　　  ctx.save();                  // Save the default state
　　
　　  ctx.fillStyle = `#09F`       // Make changes to the settings
　　  ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings
　　
　　  ctx.save();                  // Save the current state
　　  ctx.fillStyle = `#FFF`       // Make changes to the settings
　　  ctx.globalAlpha = 0.5;    
　　  ctx.fillRect(30,30,90,90);   // Draw a rectangle with new settings
　　
　　  ctx.restore();               // Restore previous state
　　  ctx.fillRect(45,45,60,60);   // Draw a rectangle with restored settings
　　
　　  ctx.restore();               // Restore original state
　　  ctx.fillRect(60,60,30,30);*/ // Draw a rectangle with restored settings

    //旋轉canvas座標 rotate/translate移動canvas座標原點
　　ctx.translate(100,100);
    for (var i=1;i<6;i++){ 
    // Loop through rings (from inside to out)
　　    ctx.fillStyle = `rgb(`+(51*i)+`,`+(255-51*i)+`,255)`;        　　
　　    for (var j=0;j<i*6;j++){ 
    // draw individual dots
　　      ctx.rotate(Math.PI*2/(i*6));
　　      ctx.beginPath();
　　      ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
　　      ctx.fill();
　　    }
    }
} else {
    console.log("not support");
}

相關文章