canvas(二)

本文深入讲解Canvas绘图技术,涵盖颜色、透明度设置,线条样式调整,文本与图像绘制,状态保存恢复,变形操作及合成效果。通过实例展示,帮助读者掌握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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值