canvas画布的clip方法
本帖最后由 马黑黑 于 2022-8-14 22:02 编辑HTML5中的画布有裁剪方法，clip()，使用时不需要任何参数。但 clip() 方法基于路径，通常使用它之前应先开启路径，然后根据上文的绘制图片当成自己的裁剪区域。
为了简化实例，我们所举的例子仅一个画布标签，我们给它添加了一个边框样式，以便在观察效果时能看得清楚一些：
<canvas id="canv" style="border: 1px solid red"></canvas>
下来就是用JS对画布进行操作了：
<script>
let w = canv.width = 400, //设定画布宽度
h = canv.height = 400;//设定画布高度度
let ctx = canv.getContext('2d');//指定画笔
ctx.beginPath();//开启路径
ctx.fillStyle = 'green'; //填充色为绿色（测试用，裁剪并不需要设定颜色）
ctx.rect(100, 100, 200, 200);//在{100，100}处开始绘制一个 200*200 的矩形
ctx.fill(); //填充（必须）
ctx.clip(); //clip方法将前面的绘制图形作为裁剪区域
//尝试在画布上画一个全幅红色矩形。结果：全幅无效，只能在clip区域绘制
ctx.fillStyle = 'red'; //填充色为红色
ctx.fillRect(0, 0, w, h); //绘制全幅矩形
</script>
我们没有使用 ctx.closePaht() 来关闭路径，这是因为凡用 fill 方法，画笔会自动关闭路径（关闭处在新路径开启前）。
clip() 裁剪依赖于前面绘制的图形，亦即它的启用要配合一个绘制过程，紧跟在绘制动作完成之后启用 clip() 方法。
clip() 方法通常还应配合画笔的 save() 和 restore() 方法，以便保存和恢复裁剪前的画布状态。
画布的裁剪。又知道一个新的知识了。谢谢黑黑{:4_187:} 红影 发表于 2022-8-14 22:34
画布的裁剪。又知道一个新的知识了。谢谢黑黑
{:4_190:} 来学习！ 马黑黑 发表于 2022-8-14 23:05
黑黑吧裁剪矩形和裁剪圆都讲了，不知道还能裁剪别的形状么。 红影 发表于 2022-8-15 21:10
黑黑吧裁剪矩形和裁剪圆都讲了，不知道还能裁剪别的形状么。
可以，你会画什么就可以裁剪什么 马黑黑 发表于 2022-8-15 21:10
可以，你会画什么就可以裁剪什么
估计我能画出来也裁不出来{:4_173:} 红影 发表于 2022-8-16 22:31
估计我能画出来也裁不出来
手巧的，不怕 马黑黑 发表于 2022-8-16 22:36
手巧的，不怕
同意，但我属于手笨的{:4_173:} 红影 发表于 2022-8-17 21:19
同意，但我属于手笨的
练练就巧 马黑黑 发表于 2022-8-17 21:23
练练就巧
好吧，那我没事就练功夫去{:4_173:} 红影 发表于 2022-8-17 22:11
好吧，那我没事就练功夫去
还有八段锦 马黑黑 发表于 2022-8-17 22:33
还有八段锦
哈哈，那个就算了，天太热了{:4_173:} 红影 发表于 2022-8-17 23:02
哈哈，那个就算了，天太热了
八段锦，现在我都在猪场推行了，猪猪练了之后，长的更好了 马黑黑 发表于 2022-8-17 23:19
八段锦，现在我都在猪场推行了，猪猪练了之后，长的更好了
哈哈，这话也太搞笑了，猪猪都不会直立站立，怎么做八段锦啊{:4_173:} 红影 发表于 2022-8-18 21:20
哈哈，这话也太搞笑了，猪猪都不会直立站立，怎么做八段锦啊
八段锦里有摇头摆尾，你木有尾巴你怎么做{:4_173:} 马黑黑 发表于 2022-8-18 21:47
八段锦里有摇头摆尾，你木有尾巴你怎么做
好吧，你厉害，说不过你{:4_173:} 红影 发表于 2022-8-18 22:09
好吧，你厉害，说不过你
所以说猪猪也是可以做的 马黑黑 发表于 2022-8-18 22:19
所以说猪猪也是可以做的
千万别说做的是猪猪就好{:4_170:} 红影 发表于 2022-8-19 17:03
千万别说做的是猪猪就好
差不多的吧？不是猪猪谁会做八段锦呢
页:
[1]
2