Canvas学习笔记之七：实现图片圆形剪切

最新推荐文章于 2024-08-11 21:39:05 发布

九段刀客

最新推荐文章于 2024-08-11 21:39:05 发布

阅读量3.4k

点赞数

分类专栏： js 文章标签： canvas

本文链接：https://blog.csdn.net/weixin_35958891/article/details/104089467

版权

js 专栏收录该内容

56 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas元素结合JavaScript进行绘图，包括设置阴影效果、绘制圆形并填充，以及裁剪区域后显示图片。通过具体代码示例，读者可以了解Canvas的基本用法和图像处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #test {
      box-shadow: 0 0 10px #333;
    }
  </style>
</head>
<body>
  <canvas id="test" width="500" height="400"></canvas>
  <script>
    //画布
    let canvas = document.getElementById('test');
    // 画笔
    let ctx = canvas.getContext('2d');

    let img = new Image();
    img.src = './img/2.gif';

    img.onload = function(){
      ctx.beginPath();
      ctx.arc(200,220,100,0,Math.PI*2);
      ctx.fill();
      ctx.clip();
      ctx.drawImage(this,10,10)
    }
    
  </script>
</body>
</html>