canvas(十一)合成与路径剪裁

本文介绍了如何在Canvas上运用全局透明度(globalAlpha)调整图像透明度,以及如何通过路径裁剪(clip)来限定绘制区域。同时涵盖了全局合成(globalCompositeOperation)的概念,展示了如何结合不同颜色和形状进行图像混合。
摘要由CSDN通过智能技术生成

合成与路径剪裁

透明度合成 globalAlpha

  • globalAlpha 就是全局对象的透明度,全局对象就是canvas 的上下文对象。
  • 使用方法:ctx.globalAlpha=0.6;
    在这里插入图片描述

注意:globalAlpha 要和颜色里的rgba 区别一下。rgba 控制的是某种颜色的透明度;globalAlpha 相当于是让整个画布变透明了。

const canvas=document.getElementById('canvas');
//canvas充满窗口
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
//画笔
const  ctx=canvas.getContext('2d');

/*透明度合成 globalAlpha,取值范围[0,1]*/
ctx.save();
ctx.globalAlpha=0.5;
ctx.fillRect(50,50,400,200);
ctx.fillRect(150,150,400,200);
ctx.restore();
ctx.fillRect(250,250,400,200);

路径裁剪 clip()

  • 路径裁剪就是在画布上设置一个路径,让我们之后绘制的图像只显示在这个路径之中。
  • 路径裁剪的步骤:
    • 定义路径
    • ctx.clip()
    • 绘制其它图形
const canvas=document.getElementById('canvas');
//canvas充满窗口
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
//画笔
const  ctx=canvas.getContext('2d');
ctx.save();
ctx.beginPath();
ctx.arc(300,300,100,0,Math.PI*2);
ctx.stroke();
// ctx.fillText('好好学习',300,300);
ctx.clip();
ctx.fillRect(300,300,100,100);
ctx.restore();
// ctx.fillRect(300,300,100,100);

全局合成 globalCompositeOperation

  • 全局合成是canvas 画布中的已绘图像和将绘图像的融合方式。
  • 可以从形状和色彩两方面解读全局合成。
  • 如:
    • 先画一个黄色的正方形
    • 设置全局合成的属性
    • 再绘制一个绿色的圆
      在这里插入图片描述
const canvas=document.getElementById('canvas');
//canvas充满窗口
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
//画笔
const  ctx=canvas.getContext('2d');
//正方形
ctx.fillStyle='orange';
ctx.fillRect(100,100,200,200);
//设置全局合成属性
ctx.globalCompositeOperation='source-in';
//圆
ctx.beginPath();
ctx.arc(300,300,100,0,Math.PI*2);
ctx.fillStyle='green';
ctx.fill();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值