canvas（二）

一、颜色

1. 填充颜色：fillStyle=color;
2. 轮廓颜色：strokeStyle=color;

//1、fillStyle
ctx.fillStyle="rgb(255,0,0)";
ctx.fillRect(50,50,50,50);


//2、strokeStyle
ctx.strokeStyle="rgb(255,0,0)";
ctx.strokeRect(50,50,50,50);

二、透明度

globalAlpha=transparencyValue(透明度值）

globalAlpha属性，控制canvas里所有图形的透明度，值从0.0（完全透明）到1.0（完全不透明），默认值是1.0

当然，要想对某个单独图形设置透明度，可以使用rgba(R,G,B,transparencyValue）

三、线条样式

1、线宽：lineWidth=value

2、线条末端样式：lineCap=type

           末端以方形结束：butt;

           末端以圆形结束:round;（或者说用弧形更准确一点）

           末端以方形结束：square；（与1的区别：线段两端会多出一部分，这部分的宽度和线段一样，高度是宽度的一半）

                                            

3、线条与线条连接处的样式：lineJoin=type

           以圆形（弧）连接：round；

           以一个额外的以三角形为底的区域连接：bevel；

           以一个额外的菱形连接：miter；（这个也是默认的连接样式）

                                        

4、虚线

      用setLineDash方法和lineDashOffset属性设置虚线样式。

           setLineDash方法接受一个数组，指定实线长度和间隔长度；

           lineDashOffset属性设置起始偏移量。

function draw4() {
    var canvas4=document.getElementById("canvas4");
    if(!canvas4.getContext) return;
    var ctx4=canvas4.getContext("2d");

    ctx4.setLineDash([20,5]);
    ctx4.lineDashOffset=0;
    ctx4.strokeRect(50,50,210,210);
}

                                               

 

四、绘制文本

绘制文本的两个方法：

1. fillText(text,x,y);
2. strokeText(text,x,y);

     text是文本内容，x,y是文字底部坐标

文本属性：

1. font=value；//字体大小以及样式，默认是"10px sans-serif"
2. textAlign=value；//文本对齐
3. textBaseline=value；//文本基线对齐
4. direction=value；//文本方向

function draw5() {
    var canvas5=document.getElementById("canvas5");
    if(!canvas5.getContext) return;
    var ctx5=canvas5.getContext("2d");

    ctx5.font="30px sans-serif";
    ctx5.textAlign="start";
    //ctx5.direction="rtl";
    ctx5.textBaseline="middle";
    ctx5.fillText("canvas学习",10,100);
    ctx5.strokeText("canvas学习",10,200);
}

                       

 

五、绘制图像

var img = new Image();
img.src="0.jpg";
img.onload=function(){//确保图片加载完成
    ctx.drawImage(img,0,0);
}

drawImage(img,x,y) //x,y就是图像在canvas的位置

drawImage(img,x,y,w,h) //后两个参数，是图像缩放后大小

drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh) //将图片的某个区域切片，放在canvas相应位置

function draw6() {
    var canvas6=document.getElementById("canvas6");
    if(!canvas6.getContext) return;
    var ctx6=canvas6.getContext("2d");

    var img=new Image();
    img.src="0.jpg";
    img.onload=function(){
        ctx6.drawImage(img,0,0);
        //ctx6.drawImage(img,0,0,100,100);
        //ctx6.drawImage(img,10,10,50,50,50,50,100,100);
    }
}

六、状态保存和恢复

两个方法：

save()；//把canvas当前状态保存进栈，状态包括：变形，样式。相当于push()

restore()；//取出上一个保存的状态。相当于pop()

function draw7(){
    var canvas = document.getElementById('canvas7');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");

    ctx.fillRect(0, 0, 150, 150);   // 使用默认设置绘制一个矩形
    ctx.save();                  // 保存默认状态

    ctx.fillStyle = 'red';       // 在原有配置基础上对颜色做改变
    ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形
    ctx.save();                     // 保存当前状态
    
    ctx.fillStyle = '#FFF';       // 再次改变颜色配置
    ctx.fillRect(30, 30, 90, 90);   // 使用新的配置绘制一个矩形

    ctx.restore();               // 重新加载之前的颜色状态
    ctx.fillRect(45, 45, 60, 60);   // 使用上一次的配置绘制一个矩形

    ctx.restore();               // 加载默认颜色配置
    ctx.fillRect(60, 60, 30, 30);   // 使用加载的配置绘制一个矩形
}

                                                               

 

七、变形

1、平移

      translate(x,y) 移动的是canvas的坐标原点

2、旋转

      rotate(x) 顺时针旋转，用弧度表示

3、缩放

      scale(x,y) x,y方向缩小或放大

4、变形（保留）

      transform(a,b,c,d,e,f) //变换矩阵

function draw1() {
    var canvas1=document.getElementById("canvas1");
    if(!canvas1.getContext) return;
    var ctx1=canvas1.getContext("2d");

    ctx1.save();//保存默认状态
    ctx1.translate(50,50);
    ctx1.strokeRect(0,0,50,50);

    ctx1.restore();//弹出默认状态
    ctx1.save();//保存默认状态
    ctx1.translate(100,100);//平移
    ctx1.fillRect(0,0,50,50);
    ctx1.restore();//弹出默认状态
    ctx1.save();//保存默认状态
    ctx1.translate(150,50);
    ctx1.rotate(Math.PI/180*45);//旋转
    ctx1.fillStyle="blue";
    ctx1.fillRect(0,0,50,50);
    ctx1.restore();//弹出默认状态
    ctx1.scale(1.5,1.5);//缩放
    ctx1.fillRect(0,0,50,50);

}

八、合成

function draw2() {
    var canvas2=document.getElementById("canvas2");
    if(!canvas2.getContext) return;
    var ctx2=canvas2.getContext("2d");

    ctx2.fillStyle="red";
    ctx2.fillRect(0,0,100,100);

    ctx2.globalCompositeOperation="source-over";//默认值，新图像覆盖老图像
    ctx2.globalCompositeOperation="source-in";//新图像显示重叠部分，老图像不显示
    ctx2.globalCompositeOperation="source-out";//新图像显示没有重叠的部分，老图像不显示
    ctx2.globalCompositeOperation="source-atop";//新图像显示重叠部分，老图像显示不重叠部分
    ctx2.globalCompositeOperation="destination-over";//此下四个与上面四个刚好相反
    ctx2.globalCompositeOperation="destination-in";
    ctx2.globalCompositeOperation="destination-out";
    ctx2.globalCompositeOperation="destination-atop";
    ctx2.globalCompositeOperation="lighter";//重叠区域颜色做加处理
    ctx2.globalCompositeOperation="darken";//保留重叠部分最黑的像素（每个颜色位比较，保留最小的）blue:#0000ff,red:#ff0000 得到：#000000
    ctx2.globalCompositeOperation="lighten";//与上相反，保留最大颜色位
    ctx2.globalCompositeOperation="xor";//重叠部分变透明
    ctx2.globalCompositeOperation="copy";//只保留新图像

    ctx2.fillStyle="blue";
    ctx2.fillRect(50,50,100,100);
}

学习过程笔记，如有错误，欢迎指正

上一篇：canvas（一）

参考：https://blog.youkuaiyun.com/u012468376/article/details/73350998