HTML5系列之canvas用法

church

2019-06-30

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");
}

canvas html5 stroke