小程序如何绘制一个圆形图片？

勤 2018-01-30 13193 浏览问题模块： Bug反馈

框架类型	API/组件名称	基础库版本	canvas	6.6.1	1.9.1

微信小程序如何使用canvas实现绘制一个圆形的png图片？

canvasContext.drawImage只能改变图片大小，位置，并不能改变图片展现形状，请问如何解决？

回答关注问题邀请回答

收藏

扫描小程序码分享
 复制链接

关闭

请选择投诉理由

广告内容

违法违规

恶意灌水内容

其他

删除当前帖子

删除后帖子内容及评论将一并被删除，且不可恢复。

删除取消

关闭

确定删除？

删除后不可恢复

取消确定

关闭

关注“微信开放社区”公众号

关注后，可在微信内接收相应的重要提醒。

请使用微信扫描二维码关注 “微信开放社区” 公众号

关闭

反馈

<div style="text-align:center;margin-top:20px;"><button class="btn btn-primary">确定</button><button class="btn btn-default" style="margin-left:20px;">取消</button></div></div></div></div></div></div></div></div><div class="anwser__area"><div class="answer_container"><div class="anwser__hd"><p class="anwser__title">2 个回答</p></div><div id="comment-list" class=" anwsers__list"><div class="answer_container"><div class="post_comment_area"><ul class="post_comment_list"><li itemprop="answer" itemscope="itemscope" itemtype="http://schema.org/Answer" id="00082cc55a8e40937a4691f305b0" class="widget_comment js_post_comment_item post_comment_item "><meta check-reduce="" itemprop="image"/><meta check-reduce="" itemprop="upvoteCount" content="3"/><meta check-reduce="" itemprop="url" content="https://developers.weixin.qq.com/community/develop/doc/000ceeae910e9076f4367772d51000?jumpto=comment&commentid=00082cc55a8e40937a4691f305b0"/><meta check-reduce="" itemprop="dateCreated" content="Mon Feb 05 2018 17:25:40 GMT+0800 (China Standard Time)"/><meta check-reduce="" itemprop="dateModified" content="Thu Jan 01 1970 08:00:00 GMT+0800 (China Standard Time)"/><meta check-reduce="" itemprop="commentCount" content="1"/><a href="/community/personal/oCJUsw4qRWofIGIeAFL_6HzN0zgU" target="_blank" class="post_comment_owner"><span class="popover__box popover_appreciate popover__box_hide" data-v-0a980b96=""><span class="popover_target"><div class="post_comment_owner_avatar"><img src="https://wx.qlogo.cn/mmhead/Q3auHgzwzM6hOMWyr9hEDHIylQg8At09QgwicgBAlc7ov9p6RL0ElWQ/0" alt="nullno" class="post_comment_owner_avatar_image"/></div><strong data-component-identifier="replybox__nick_name" class="post_comment_owner_nickname">nullno</strong></span></span></a><div class="checking_state_new"></div><span class="post_comment_pos"><span check-reduce="" class="post_comment_time">2018-02-05</span></span><div check-reduce="" class="post_comment_editor_area comment_editor_box" style=";"><div class="post_comment_content post_editor_box"><div class="mode__rich-text-editor mode__rich-text-editor__normal"><div class="mode__rich-text-editor__header mode__rich-text-editor__header__normal"><div class="mode__rich-text-editor__header__extend"/><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__bold"><button class="mode__rich-text-editor__icon mode__rich-text-editor__icon__bold ql-bold"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>加粗</p></span></div><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__red"><button value="red" class="mode__rich-text-editor__icon mode__rich-text-editor__icon__red ql-red"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>标红</p></span></div><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__ql-code-block"><button class="mode__rich-text-editor__icon mode__rich-text-editor__icon__code-block ql-code-block"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>插入代码</p></span></div><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__ql-link"><button class="mode__rich-text-editor__icon mode__rich-text-editor__icon__link ql-link"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>插入链接</p></span></div><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__ql-image"><button class="mode__rich-text-editor__icon mode__rich-text-editor__icon__image ql-image"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>插入图片</p></span></div><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__ql-video"><button class="mode__rich-text-editor__icon mode__rich-text-editor__icon__video ql-video"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>上传视频</p></span></div></div><div class="mode__rich-text-editor__body" style=";"/><div class="mode__rich-text-editor__body" style="display:;"><div> 请 <a>登录</a> 后发表内容 </div></div><div class="dialog_wrapper dialog_with_head" style=";"><div class="dialog_wrp_new dialog_component" style="width:600px;"><div class="dialog"><a href="javascript:;" class="icon16_opr closed pop_closed">关闭</a><div class="dialog_hd"><h3>新增或编辑超链接</h3></div><div class="dialog_bd"><div class="frm_control_group"><label for="" class="frm_label">链接地址</label><div class="frm_controls"><span class="frm_input_box"><input type="text" value="https://" class="frm_input"/></span></div></div></div><div class="dialog_ft"><a href="javascript:;" class="btn btn_info">确认</a><a href="javascript:;" class="btn btn_default">取消</a></div></div></div></div><div class="dialog_wrapper dialog__insert-video dialog_with_head" style=";"><div class="dialog_wrp_new dialog_component" style="width:600px;"><div class="dialog"><a href="javascript:;" class="icon16_opr closed pop_closed">关闭</a><div class="dialog_hd"><h3>插入视频</h3></div><div class="dialog_bd"><div class="frm_control_group"><label for="" class="frm_label">视频链接</label><div class="frm_controls"><span class="frm_input_box"><input type="text" placeholder="仅支持插入腾讯视频" value="" class="frm_input"/></span></div></div></div><div class="dialog_ft"><a href="javascript:;" class="btn btn_info">确认</a><a href="javascript:;" class="btn btn_default">取消</a></div></div></div></div></div><div class="tool_bar tr"><a href="javascript:;" class="btn btn_primary edui-default">发表</a></div></div></div><div class="post_comment_content_container"><div itemprop="text" class="post_comment_content expanded" style="display:;"><p><span style="color: #0000ff;">var</span> ctx = wx.createCanvasContext(<span style="color: #a31515;">'myCanvas'</span>);</p><p>ctx.beginPath();</p><p>ctx.arc(<span style="color: #09885a;">30</span>, <span style="color: #09885a;">30</span>, <span style="color: #09885a;">26.5</span>, <span style="color: #09885a;">0</span>, <span style="color: #09885a;">2</span> * Math.PI);</p><p>ctx.setLineWidth(<span style="color: #09885a;">6</span>)</p><p>ctx.setStrokeStyle('描边颜色')</p><p>ctx.stroke();<span style="color: #008000;">//画空心圆</span></p><p>ctx.closePath();</p><p>ctx.save();</p><p>ctx.arc(<span style="color: #09885a;">30</span>, <span style="color: #09885a;">30</span>, <span style="color: #09885a;">25</span>, <span style="color: #09885a;">0</span>, <span style="color: #09885a;">2</span> * Math.PI)</p><p>ctx.clip(); <span style="color: #008000;">//裁剪上面的圆形</span></p><p>ctx.drawImage('图片', <span style="color: #09885a;">0</span>, <span style="color: #09885a;">0</span>, <span style="color: #09885a;">60</span>, <span style="color: #09885a;">60</span>);</p><p>ctx.draw();</p><p><br/></p></div></div><div itemprop="text" class="post_comment_content" style=";"><p>你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。</p><a href="javascript:;" disabled="disabled" class="btn btn_default" style="margin: 12px 0; color: #999">待楼主反馈</a></div><div class="post_comment_info" style="display:;"><div class="mobile_post_comment_info_hd"><div class="mobile_post_comment_time">2018-02-05</div></div><div class="post_comment_opr"><div data-component-identifier="comment-like" class="best_comment_agree click "><div class="comment_topic_agree"><i class="icon_post_opr icon_topic_unagree"/>有用 <span>3</span></div></div><div class="best_comment_unagree"><div class="comment_topic_agree"><i class="icon_post_opr icon_topic_unagree"/></div></div><div class="js_comment best_comment_discuss"><i class="icon_post_opr discuss"/><span check-reduce="" class="post_opr_wording">回复 <span class="best_comment_num">1</span></span></div></div></div><div class="post_comment_reply_area part3"><div class="post_comment_area"><ul class="post_comment_list" style="display:;"><li itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/Comment" id="00024a1875c000cbd649550e5560" class="widget_comment js_post_comment_item post_comment_item "><meta check-reduce="" itemprop="image"/><meta check-reduce="" itemprop="upvoteCount" content="1"/><meta check-reduce="" itemprop="url" content="https://developers.weixin.qq.com/community/develop/doc/000ceeae910e9076f4367772d51000?jumpto=comment&commentid=00024a1875c000cbd649550e5560"/><meta check-reduce="" itemprop="dateCreated" content="Mon Oct 14 2019 17:22:10 GMT+0800 (China Standard Time)"/><meta check-reduce="" itemprop="dateModified" content="Mon Oct 14 2019 17:22:10 GMT+0800 (China Standard Time)"/><meta check-reduce="" itemprop="commentCount" content="0"/><a href="/community/personal/oCJUsw0BO3GRtKxX2EkKi_QGt1YA" target="_blank" class="post_comment_owner"><span class="popover__box popover_appreciate popover__box_hide" data-v-0a980b96=""><span class="popover_target"><div class="post_comment_owner_avatar"><img src="https://wx.qlogo.cn/mmhead/OM4v0FU2h0tkZic4Ak8XcMHSvAhkLrDTsffSZ6e5H1UGPkGGGvxUcOw/0" alt="Rohlin🙉🙈🙊" class="post_comment_owner_avatar_image"/></div><strong data-component-identifier="replybox__nick_name" class="post_comment_owner_nickname">Rohlin🙉🙈🙊</strong></span></span></a><div class="checking_state_new"></div><span class="post_comment_pos"><span check-reduce="" class="post_comment_time">2019-10-14</span></span><div check-reduce="" class="post_comment_editor_area comment_editor_box" style=";"><div class="post_comment_content post_editor_box"><div class="mode__rich-text-editor mode__rich-text-editor__normal"><div class="mode__rich-text-editor__header mode__rich-text-editor__header__normal"><div class="mode__rich-text-editor__header__extend"/><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__bold"><button class="mode__rich-text-editor__icon mode__rich-text-editor__icon__bold ql-bold"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>加粗</p></span></div><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__red"><button value="red" class="mode__rich-text-editor__icon mode__rich-text-editor__icon__red ql-red"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>标红</p></span></div><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__ql-code-block"><button class="mode__rich-text-editor__icon mode__rich-text-editor__icon__code-block ql-code-block"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>插入代码</p></span></div><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__ql-link"><button class="mode__rich-text-editor__icon mode__rich-text-editor__icon__link ql-link"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>插入链接</p></span></div><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__ql-image"><button class="mode__rich-text-editor__icon mode__rich-text-editor__icon__image ql-image"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>插入图片</p></span></div><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__ql-video"><button class="mode__rich-text-editor__icon mode__rich-text-editor__icon__video ql-video"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>上传视频</p></span></div></div><div class="mode__rich-text-editor__body" style=";"/><div class="mode__rich-text-editor__body" style="display:;"><div> 请 <a>登录</a> 后发表内容 </div></div><div class="dialog_wrapper dialog_with_head" style=";"><div class="dialog_wrp_new dialog_component" style="width:600px;"><div class="dialog"><a href="javascript:;" class="icon16_opr closed pop_closed">关闭</a><div class="dialog_hd"><h3>新增或编辑超链接</h3></div><div class="dialog_bd"><div class="frm_control_group"><label for="" class="frm_label">链接地址</label><div class="frm_controls"><span class="frm_input_box"><input type="text" value="https://" class="frm_input"/></span></div></div></div><div class="dialog_ft"><a href="javascript:;" class="btn btn_info">确认</a><a href="javascript:;" class="btn btn_default">取消</a></div></div></div></div><div class="dialog_wrapper dialog__insert-video dialog_with_head" style=";"><div class="dialog_wrp_new dialog_component" style="width:600px;"><div class="dialog"><a href="javascript:;" class="icon16_opr closed pop_closed">关闭</a><div class="dialog_hd"><h3>插入视频</h3></div><div class="dialog_bd"><div class="frm_control_group"><label for="" class="frm_label">视频链接</label><div class="frm_controls"><span class="frm_input_box"><input type="text" placeholder="仅支持插入腾讯视频" value="" class="frm_input"/></span></div></div></div><div class="dialog_ft"><a href="javascript:;" class="btn btn_info">确认</a><a href="javascript:;" class="btn btn_default">取消</a></div></div></div></div></div><div class="tool_bar tr"><a href="javascript:;" class="btn btn_primary edui-default">发表</a></div></div></div><div class="post_comment_content_container"><div itemprop="text" class="post_comment_content expanded" style="display:;">感谢大佬你太优秀了</div></div><div itemprop="text" class="post_comment_content" style=";"><p>你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。</p><a href="javascript:;" disabled="disabled" class="btn btn_default" style="margin: 12px 0; color: #999">待楼主反馈</a></div><div class="cm-s-default CodeMirror-wrap"></div><div class="post_comment_info" style="display:;"><div class="mobile_post_comment_info_hd"><div class="mobile_post_comment_time">2019-10-14</div></div><div class="post_comment_opr"><div data-component-identifier="comment-like" class="best_comment_agree click "><i class="icon_post_opr icon_agree"/><span check-reduce="" class="post_opr_wording">赞 <span>1</span></span></div><div class="js_comment post_opr_meta post_opr_meta_comment_reply"><i class="icon_post_opr discuss"/><span check-reduce="" class="post_opr_wording">回复</span></div></div></div><div check-reduce="" class="dialog_wrapper page_mode_dialog_complain dialog_with_head" style=";"><div class="dialog_wrp_new dialog_component"><div class="dialog"><a href="javascript:;" class="icon16_opr closed pop_closed">关闭</a><div class="dialog_hd"><h3>请选择投诉理由</h3></div><div class="dialog_bd"><div class="dialog_complain_list"><div class="mod_access"><ul class="access_list"><li class="access_list_item access_list_item_hasMore"><div class="access_list_item_head">广告内容</div></li><li class="access_list_item access_list_item_hasMore"><div class="access_list_item_head">违法违规</div></li><li class="access_list_item access_list_item_hasMore"><div class="access_list_item_head">恶意灌水内容</div></li><li class="access_list_item access_list_item_hasMore"><div class="access_list_item_head">其他</div></li></ul></div></div></div></div></div></div><div></div><div></div></li></ul></div></div><div check-reduce="" class="dialog_wrapper page_mode_dialog_complain dialog_with_head" style=";"><div class="dialog_wrp_new dialog_component"><div class="dialog"><a href="javascript:;" class="icon16_opr closed pop_closed">关闭</a><div class="dialog_hd"><h3>请选择投诉理由</h3></div><div class="dialog_bd"><div class="dialog_complain_list"><div class="mod_access"><ul class="access_list"><li class="access_list_item access_list_item_hasMore"><div class="access_list_item_head">广告内容</div></li><li class="access_list_item access_list_item_hasMore"><div class="access_list_item_head">违法违规</div></li><li class="access_list_item access_list_item_hasMore"><div class="access_list_item_head">恶意灌水内容</div></li><li class="access_list_item access_list_item_hasMore"><div class="access_list_item_head">其他</div></li></ul></div></div></div></div></div></div><div></div><div></div></li><li itemprop="answer" itemscope="itemscope" itemtype="http://schema.org/Answer" id="000eac4c9e08700d7f762335e5d0" class="widget_comment js_post_comment_item post_comment_item "><meta check-reduce="" itemprop="image"/><meta check-reduce="" itemprop="upvoteCount" content="0"/><meta check-reduce="" itemprop="url" content="https://developers.weixin.qq.com/community/develop/doc/000ceeae910e9076f4367772d51000?jumpto=comment&commentid=000eac4c9e08700d7f762335e5d0"/><meta check-reduce="" itemprop="dateCreated" content="Fri Mar 16 2018 10:00:37 GMT+0800 (China Standard Time)"/><meta check-reduce="" itemprop="dateModified" content="Thu Jan 01 1970 08:00:00 GMT+0800 (China Standard Time)"/><meta check-reduce="" itemprop="commentCount" content="0"/><a href="/community/personal/oCJUsw6QBnYdNjlPLYKJoA5MlPsg" target="_blank" class="post_comment_owner"><span class="popover__box popover_appreciate popover__box_hide" data-v-0a980b96=""><span class="popover_target"><div class="post_comment_owner_avatar"><img src="https://wx.qlogo.cn/mmhead/Q3auHgzwzM7VgHibCibCKrqX0zgyG9D9w3ibLTkF8ias4aG7bhZllV2BZQ/0" alt="勤" class="post_comment_owner_avatar_image"/></div><strong data-component-identifier="replybox__nick_name" class="post_comment_owner_nickname">勤</strong></span></span></a><div class="checking_state_new"><span title="楼主" class="lz_new"/></div><span class="post_comment_pos"><span check-reduce="" class="post_comment_time">2018-03-16</span></span><div check-reduce="" class="post_comment_editor_area comment_editor_box" style=";"><div class="post_comment_content post_editor_box"><div class="mode__rich-text-editor mode__rich-text-editor__normal"><div class="mode__rich-text-editor__header mode__rich-text-editor__header__normal"><div class="mode__rich-text-editor__header__extend"/><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__bold"><button class="mode__rich-text-editor__icon mode__rich-text-editor__icon__bold ql-bold"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>加粗</p></span></div><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__red"><button value="red" class="mode__rich-text-editor__icon mode__rich-text-editor__icon__red ql-red"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>标红</p></span></div><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__ql-code-block"><button class="mode__rich-text-editor__icon mode__rich-text-editor__icon__code-block ql-code-block"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>插入代码</p></span></div><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__ql-link"><button class="mode__rich-text-editor__icon mode__rich-text-editor__icon__link ql-link"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>插入链接</p></span></div><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__ql-image"><button class="mode__rich-text-editor__icon mode__rich-text-editor__icon__image ql-image"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>插入图片</p></span></div><div class="weui-desktop-tooltip__wrp weui-desktop-tooltip__wrp__ql-video"><button class="mode__rich-text-editor__icon mode__rich-text-editor__icon__video ql-video"/><span class="weui-desktop-tooltip weui-desktop-tooltip__" style=";"><p>上传视频</p></span></div></div><div class="mode__rich-text-editor__body" style=";"/><div class="mode__rich-text-editor__body" style="display:;"><div>

置顶 小程序如何绘制一个圆形图片？ 精选 热门

canvasContext.drawImage只能改变图片大小，位置，并不能改变图片展现形状，请问如何解决？

请选择投诉理由

删除当前帖子

删除后帖子内容及评论将一并被删除，且不可恢复。

关注“微信开放社区”公众号

反馈

小程序如何绘制一个圆形图片？