canvas-将方形绘制为圆形

桃扇骨 2021-10-19 03:14 431阅读 0赞

换个名字测 保存图片

var contex = wx.createCanvasContext(‘firstCanvas’)  
var avatarurl\_width = 100; //绘制的头像宽度  
var avatarurl\_heigth = 100; //绘制的头像高度  
var avatarurl\_x = 50; //绘制的头像在画布上的位置  
var avatarurl\_y = 50; //绘制的头像在画布上的位置  
contex.save();

contex.beginPath(); //开始绘制
    //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
    contex.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
    
    contex.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
    
    contex.drawImage('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2369419058,1797305489&fm=27&gp=0.jpg', avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片
    
    contex.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
    
    contex.draw(); //可将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中

转载自：[https://www.cnblogs.com/-mrl/p/9072009.html][https_www.cnblogs.com_-mrl_p_9072009.html]

[https_www.cnblogs.com_-mrl_p_9072009.html]: https://www.cnblogs.com/-mrl/p/9072009.html

发表评论取消回复

表情：

评论列表（有 0 条评论，431人围观）

还没有评论，来说两句吧...

相关阅读

相关 RoundedImageView设置各种圆形、方形头像

![20181106202007940.png][] ![20181106202019494.png][] 一.第三方RoundedImageView 1.在Android

Love The Way You Lie/ 2023年07月13日 13:42/ 0 赞/ 79 阅读

相关【HTML5】网页实用技巧3：将方形图片设置成圆形后，添加圆形虚线边框

需要实现的效果：将原本是方形的图片，变成圆形，且添加一个圆形边框 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

太过爱你忘了你带给我的痛/ 2022年12月27日 14:26/ 0 赞/ 175 阅读

相关 openlayers 使用canvas绘制圆形头像图标

> 记录一个使用canvas 将一张图片等比缩放，裁剪为一个圆 1、原始图片 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdG

旧城等待，/ 2022年11月29日 13:09/ 0 赞/ 450 阅读

相关【Html5】canvas绘制圆形

上一篇中写了滤镜的效果，这一次把滤镜效果写在圆上，和上一篇原理是一样的先截个图： ![1334153306_3907.png][]

喜欢ヅ旅行/ 2022年06月13日 11:30/ 0 赞/ 285 阅读

相关 canvas应用——将方形图片处理为圆形

上段时间在项目中需要将方形图片处理为圆形图片，你可能会说直接用css设置border-radius: 50%就可以了，但是项目中还要将此图片的圆形图片作为一部分利用canvas

朱雀/ 2022年05月27日 22:49/ 0 赞/ 354 阅读

相关 canvas arc() 方法绘制弧线、曲线、圆形，rect() 绘制矩形

目录 canvas arc() 方法绘制圆形填充圆形 canvas rect() 绘制矩形 -------------------- 注意：canvas 的 w

男娘i/ 2022年04月16日 03:36/ 0 赞/ 1567 阅读

相关 h5 Canvas圆弧与圆形的绘制

圆和圆弧是图形中基本图形之一.在Canvas中，CanvasRenderingContext2D对象提供了两个方法（arc()和arcTo()）来绘制圆和圆弧。 JavaS

向右看齐/ 2022年03月16日 12:46/ 0 赞/ 438 阅读

相关 canvas-将方形绘制为圆形

换个名字测保存图片 var contex = wx.createCanvasContext(‘firstCanvas’) var avatarurl\_width =

桃扇骨/ 2021年10月19日 03:14/ 0 赞/ 432 阅读

相关 html5 canvas绘制圆形、方形矩形、线段、图片等各种图形（面向对象版本）

概念：面向对象的方法主要是把事物给对象化，包括其属性和行为。面向对象编程更贴近实际生活的思想。总体来说面向对象的底层还是面向过程，面向过程抽象成类，然后封装，方便使

爱被打了一巴掌/ 2021年07月24日 21:53/ 0 赞/ 430 阅读

相关 canvas 圆形、文本

canvas 圆形绘制 1、bi.arc(圆心x,圆心y,半径r,开始弧度,结束弧度,绘制方向); bi.arc(圆心x,

た入场券/ 2021年07月24日 21:12/ 0 赞/ 475 阅读