canvas学习笔记（七）----裁切路径

最新推荐文章于 2024-08-10 11:53:46 发布

??or??

最新推荐文章于 2024-08-10 11:53:46 发布

阅读量481

点赞数

分类专栏： canvas 前端文章标签： canvas

本文链接：https://blog.csdn.net/zhangyr_student/article/details/102976490

版权

本文是关于canvas的学习笔记，重点介绍了clip()方法的使用，该方法将当前路径定义为裁剪区域，只保留与路径相交的部分。值得注意的是，clip()方法一旦使用，后续再次调用将不再生效。

摘要由CSDN通过智能技术生成

clip（）将当前的路径转换为裁剪路径

只能用一次，后续再用，不起作用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day5-1</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="150" height="150">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas.getCon