效果图：

思路：

  1. 先绘制一个圆角长方形
  2. 在画布中裁剪下来
  3. 在圆角长方形内绘制图片
  4. 图片四个角超出圆角长方形的区域被隐藏

具体代码：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Canvas绘制时钟</title>

    <style>

      .wrapper {

        display: flex;

        justify-content: center;

        align-items: center;

        height: 800px;

      }

      .left {

        margin-right: 100px;

      }

      #canvas {

        border: 1px solid #ccc;

      }

      #img {

        width: 270px;

        height: 300px;

        margin-right: 60px;

        border: 2px solid #ccc;

      }

    </style>

  </head>

  <body>

    <div class="wrapper">

      <div class="left">

        <p>原图 270 * 300</p>

        <img id="img" src="./3.jpeg" />

      </div>

      <div class="right">

        <p>canvas 300 * 400</p>

        <p>图片 200 * 300</p>

        <canvas id="canvas" width="300" height="400"></canvas>

      </div>

    </div>

    <script>

      let canvas = document.getElementById('canvas');

      let ctx = canvas.getContext('2d');

      let img = document.getElementById('img');

      img.onload = function () {

        handleDraw();

      };

      handleDraw = () => {

        handleBorderRect(ctx, 10, 10, 200, 300, 14, '#ccc');

        ctx.clip();

        ctx.drawImage(img, 10, 10, 200, 300);

      };

      handleBorderRect = (ctx, x, y, w, h, r, color) => {

        ctx.beginPath();

        // 左上角

        ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI);

        ctx.moveTo(x + r, y);

        ctx.lineTo(x + w - r, y);

        ctx.lineTo(x + w, y + r);

        // 右上角

        ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI);

        ctx.lineTo(x + w, y + h - r);

        ctx.lineTo(x + w - r, y + h);

        // 右下角

        ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);

        ctx.lineTo(x + r, y + h);

        ctx.lineTo(x, y + h - r);

        // 左下角

        ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI);

        ctx.lineTo(x, y + r);

        ctx.lineTo(x + r, y);

        ctx.fillStyle = color;

        ctx.fill();

        ctx.closePath();

      };

    </script>

  </body>

</html>

如果在Taro中食用，需要改动一下:

  1. 将img.onload换成Taro.getImageInfo
  2. 在getImageInfo的success回调中调用绘制图片的方法handleDraw
     
 

Canvas绘制圆角图片的更多相关文章

  1. canvas绘制圆角头像

    如果你想绘制的网页包含一个圆弧形的头像的canvas图片,但是头像本身是正方形的,需要的方法如下:首先, 拿到头像在画布上的坐标和宽高:(具体怎么获取不在此做具体介绍) 使用canvas绘制圆弧动画 ...

  2. [HTML5] Canvas绘制简单图片

    获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象的onload方法,调用context对象的drawImage()方法,参数:Image对象,x坐标, ...

  3. canvas 绘制圆角矩形

    <!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</ ...

  4. 实现鼠标拖动canvas绘制的图片

    不啰嗦上代码: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...

  5. canvas实现圆角图片 （处理原图是长方形或正方形）

    /** * 生成图片的缩略图 * @param {[type]} img 图片(img)对象或地址 * @param {[type]} width 缩略图宽 * @param {[type]} hei ...

  6. Unity3d《Shader篇》绘制圆角图片

    Pass { CGPROGRAM // Upgrade NOTE: excluded shader from OpenGL ES 2.0 because it does not contain a s ...

  7. android绘制圆形图片的两种方式

    看下效果先 下面有完整的示例代码 使用BitmapShader(着色器) 我们在绘制view 的时候 就是小学上美术课 用水彩笔在本子上画画 使用着色器绘制圆形图片最简单的理解方式 就是把bitmap ...

  8. Android 圆形/圆角图片的方法

    Android 圆形/圆角图片的方法 眼下网上有非常多圆角图片的实例,Github上也有一些成熟的项目.之前做项目,为了稳定高效都是选用Github上的项目直接用.但这样的结束也是Android开发必 ...

  9. html5新特性canvas绘制图像

    在前端页面开发过程中偶尔会有需要对数据进行相应的数学模型展示,或者地理位置的动态展示,可能就会想到用canvas,网上有很多已经集成好的,比如说类似echarts,确实功能非常强大,而且用到了canv ...

  10. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

随机推荐

  1. 效率工具mysoV0.3.0功能介绍

      也许大家在日常工作中,有使用过提升效率的工具,比如快速搜索文件的Everything:火柴:Listary等,这些工具都在一定程度上提升您的工作效率.myso作为后来者,跟上述软件一样,也是为提升 ...

  2. Python基础篇（安装）

    Python简介 Python是Guido van Rossum发布于1991年的一种计算机程序设计语言.是一种动态的.面向对象的脚本语言,是一种解释型的,弱类型的高级计算机语言.需要注意的是pyth ...

  3. 京东二面：Sychronized的锁升级过程是怎样的

    引言 Java作为主流的面向对象编程语言,提供了丰富的并发工具来帮助开发者解决多线程环境下的数据一致性问题.其中,内置的关键字"Synchronized"扮演了至关重要的角色,它能 ...

  4. 基于 ESP8266_RTOS_SDK 驱动 DHT11

    概述 DHT11模块使用一根data线实现信号触发以及数据反馈,信号格式参考如下 https://zhuanlan.zhihu.com/p/347904660 本文使用GPIO中断的方式采集反馈数据 ...

  5. C# EF 使用sqlite 数据库出现表名出现dbo的坑

    当ef使用sqlite时,正常情况映射的表名是没有dbo开头的.这个dbo是映射的sa用户,而sqlite是没有用户的.所以映射出的sql语句是查不到数据的.   我在网上找半天解决方案,都不得行.后 ...

  6. 【web】自定义协议Protocol URL

    URL Protocol(自定义协议)可以让web页面调用本地exe程序,这个神奇的功能是怎么实现的呢? URL ProtocolURL Protocol,没错就是标题里所说的自定义协议.这玩意儿大家 ...

  7. 云原生时代的"应用级"多云管理

    作者:张齐 当前云计算有多种形态公有云.私有云.边缘云.虚拟机等,如何高效管理多云是当前面临的问题,在云原生时代,又该如何利用云原生技术实现多云管理?本文将讲解通过 Rainbond实现"应 ...

  8. 安装centos7模板机[lvm版]

    1. 安装centos 7模板机 准备好centos7的镜像 下载地址:http://mirrors.aliyun.com/centos/7/isos/x86_64/ 安装centos 自定义硬件: ...

  9. 详解 JS 中的事件循环、宏/微任务、Primise对象、定时器函数，以及其在工作中的应用和注意事项

    为什么会突然想到写这么一个大杂烩的博文呢,必须要从笔者几年前的一次面试说起 当时的我年轻气盛,在简历上放了自己的博客地址,而面试官应该是翻了我的博客,好几道面试题都是围绕着我的博文来提问 其中一个问题 ...

  10. Vulkan的VkImage和OpenGL的Texture2D互转的3种方法

    Vulkan的纹理和OpenGL的纹理之间共享的解决方案, 因为项目的功能需要同时引入OpenGL和Vulkan,又因为效率的影响必须想办法优化,两者之间需要互相访问互相转换的高效方案. Vulkan ...