• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序利用画布动态画圆

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

wxml代码

<view class='container'>
	<canvas style='width:300px;height:200px;' canvas-id='canvas'></canvas>
</view>

 js代码

Page({
    data: {
        // 开始角度
        startAngle: -(1 / 2 * Math.PI),
        // 结束角度
        endAngle: 3 / 2 * Math.PI,
        // 偏移角度
        xAngle: Math.PI / 180
    },
    onLoad: function() {
        var that = this;
        var cxt_arc = wx.createContext();
        var endAngle = that.data.endAngle;
        var xAngle = that.data.xAngle;
        var templeAngle = that.data.startAngle;
        var rander = function() {
            if (templeAngle >= endAngle) {
                return;
            } else if (templeAngle + xAngle > endAngle) {
                templeAngle = endAngle;
            } else {
                templeAngle += xAngle
            }
            cxt_arc.beginPath();
            cxt_arc.setStrokeStyle('red')
            cxt_arc.arc(100, 50, 50, that.data.startAngle, templeAngle);
            cxt_arc.stroke();
            cxt_arc.closePath();
            wx.drawCanvas({
                canvasId: 'canvas',
                actions: cxt_arc.getActions()
            })
   
            requestAnimationFrame(rander);
        }
        rander()
    },
})

 对requestAnimationFrame的解释

window.requestAnimFrame = (function(){
	return  window.requestAnimationFrame       ||
	      window.webkitRequestAnimationFrame ||
	      window.mozRequestAnimationFrame    ||
	        function( callback ){
	                window.setTimeout(callback, 1000 / 60);
	         };
})();
         

canvas的arc参数
arc(圆的中心位置x坐标,圆的中心位置y坐标,圆的半径,开始的角度,结束的角度,顺时针还是逆时针[true是逆时针])
再放一张圆的角度图


这样就完成了对一个圆的动态画布的绘制

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序弹框提示绑定手环实例发布时间:2022-07-18
下一篇:
小程序发布流程发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap