zoukankan      html  css  js  c++  java
  • 微信小程序使用canvas绘制图片及图片圆角

    1.绘制圆形头像

    //绘制的头像宽度
    let avatarurl_width = 40
    //绘制的头像高度
    let avatarurl_heigth = 40
    //绘制的头像在画布上的位置
    let avatarurl_x = 10
    //绘制的头像在画布上的位置
    let avatarurl_y = 10
    
    // 绘制头像
    ctx.save()
    // 开始创建一个路径
    ctx.beginPath()
    // 画一个圆形裁剪区域
    ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false)
    // 裁剪
    ctx.clip()
    // 绘制图片
    ctx.drawImage(this.data.postAvater, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth)
    // 恢复之前保存的绘图上下文
    ctx.restore()
    

    2. 绘制4个像素的图片圆角

    // 图片的x坐标
    let bg_x = 10
    // 图片的y坐标
    let bg_y = 70
    // 图片宽度
    let bg_w = this.data.pageWidth - 116
    // 图片高度
    let bg_h = this.data.pageHeight * 0.35
    // 图片圆角
    let bg_r = 4
     
    // 绘制海报背景图片圆角
    ctx.save()
    ctx.beginPath()
    ctx.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI*1.5)
    ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2)
    ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_h - bg_r, bg_r, 0, Math.PI * 0.5)
    ctx.arc(bg_x + bg_r, bg_y + bg_h - bg_r, bg_r, Math.PI * 0.5, Math.PI)
    ctx.clip()
    ctx.drawImage('../../../images/zbjd/tp1_2.png', bg_x, bg_y, bg_w, bg_h)
    // 恢复之前保存的绘图上下文
    ctx.restore()
  • 相关阅读:
    [转]只有程序员才能看懂的幽默
    论安防集成管理平台规范标准建设的重要性和必要性
    视频集成技术演进与创新实践
    (转)jQuery中Ajax事件beforesend及各参数含义
    (转)如何打一手好Log
    marquee标签
    如何学习Git,如何使用Git
    学习vue
    python安装教程
    Jmeter压力测试(入门篇)
  • 原文地址:https://www.cnblogs.com/zhang-jiao/p/12704246.html
Copyright © 2011-2022 走看看