首页 > 其他分享 >2023-07-31 在uniapp使用canvas绘制一个圆角为50%的图片【代码来自chatGpt,稍作修改】

2023-07-31 在uniapp使用canvas绘制一个圆角为50%的图片【代码来自chatGpt,稍作修改】

时间:2023-07-31 20:01:20浏览次数:42  
标签:uniapp canvas image 50% ctx 圆角 100 绘制 图片

<template>
  <view>
    <canvas id="myCanvas" :style="{ width: '200px', height: '200px' }"></canvas>
  </view>
</template>

<script>
export default {
  onReady() {
    this.drawRoundImage();
  },
  methods: {
    drawRoundImage() {
      const ctx = uni.createCanvasContext('myCanvas');

      // 绘制圆角矩形
      ctx.save();
      ctx.beginPath();
      ctx.arc(100, 100, 100, 0, 2 * Math.PI); // 圆心坐标(100, 100),半径为100
     ctx.setStrokeStyle('#333333')      ctx.stroke()
      ctx.closePath();
      ctx.clip();

      // 绘制图片
      ctx.drawImage('/static/image.jpg', 0, 0, 200, 200); // 图片路径为/static/image.jpg,绘制在(0, 0)位置,尺寸为200x200

      ctx.restore(); // 恢复之前保存的绘图上下文状态

      ctx.draw();
    },
  },
};
</script>
     2 * Math.PI 表示四个角 1.5表示3个角,借图

标签:uniapp,canvas,image,50%,ctx,圆角,100,绘制,图片
From: https://www.cnblogs.com/iuniko/p/17594352.html

相关文章

  • AcWing,第114场周赛-5058双色球
    5058.双色球约翰和贝茜玩抽球游戏。一个盒子中有n个白球和m个黑球。双方轮流行动,由约翰先行。每当轮到一方行动时,其从盒中随机抽出一个球,盒子中的每个球被抽出的概率相同。率先抽出白球的一方获胜。此外,由于贝茜的手比较笨拙,所以每当她抽出一个球后,盒子都会剧烈摇晃,随后就......
  • uniapp之微信小程序打包上线
    前言本文旨在打通uniapp上线微信小程序之任督二脉,其实之前在uniapp专题学习中已经打包过一次。这一次算是复习,复习的同时也以博客的方式记录一下。......
  • 小米/红米关闭VoLTE图标(信号旁的HD),以K50为例
    原文:https://zhuanlan.zhihu.com/p/508684071  小米/红米关闭VoLTE图标(信号旁的HD),以K50为例行也思君夜深知雪重,时闻折竹声 45人赞同了该文章新版小米系统中应运营商要求已经隐藏了VoLTE功能的开关,如果使用卡2做为上网卡,HD图标会出现在......
  • uniapp接口获取文件流
    默认的request请求是JSON格式responseType:'arraybuffer',我们可以设置 arraybuffer这样就可以拿到文件流了,案例的文件流是bas64格式uni.request({url:"https://xxx.xxx.cn/bank/file/xxx/aeb9beb4fb2444ff80d47ed11c18b991.jpg",method:'GET',responseT......
  • uniapp Ucharts 横向bar图 每个设置颜色不同
    代码-------》》》arr=[80,80,80]letvalueList=arr.map((item,index)=>{ letcolor='' letnewNumber=Number(item) if(index==0)color='#5593FE' if(index==1)color='#93b6f8' if(ind......
  • uniapp 移动端axisLabel 设置formatter无效的解决方法
    pc端是直接在option里配置移动端在renderjs里的监听变化的时候去设置updateEcharts(newValue,oldValue,ownerInstance,instance){//监听service层数据变更try{newValue.xAxis.axisLabel.formatter=function(......
  • uniapp中使用i18n
    1.安装vue-i18n 2.根目录下新建locale文件夹,创建index.jsimport{createI18n}from'vue-i18n'importenfrom'./en.json'//locale文件夹下的英文配置importzhfrom'./zh.json'//中文配置importzhFanfrom'./zh-fan.json'//繁体配置const......
  • uniapp+vue3+ts 使用pinia报错
    "hasInjectionContext"isnotexportedby"node_modules/vue-demi/lib/index.mjs",importedby"node_modules/pinia/dist/pinia.mjs".11:36:19.397at../node_modules/pinia/dist/pinia.mjs:6:9解决方法:把pinia降级先删除pinianpmunipinia......
  • 国产MCU-CW32F030开发学习-BH1750模块
    国产MCU-CW32F030开发学习-BH1750模块硬件平台CW32_48F大学计划板CW32_IOT_EVA物联网开发评估套件BH1750数字型光照强度传感器BH1750BH1750是一款数字型光照强度传感器,能够获取周围环境的光照强度。其测量范围在0~65535lx。lx勒克斯,是光照强度的单位。BH1750可用于调节......
  • HTML5/CSS3学习——Canvas使用
    什么是Canvas?HTML5的Canvas 元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,你可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建Canvas元素向HTML5页面添加Canvas 元素。规定元素的id、宽度和高度:<canvas......