Canvas

@Entry
@Component
struct LikePage {
  @State message: string = 'Hello World'

  //设置
  setting: RenderingContextSettings = new RenderingContextSettings(true)
  //画笔
  paint: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.setting)

  build() {
    Canvas(this.paint).width("100%").height("100%").backgroundColor(Color.Pink)
      .onReady(() => {
        this.draw()
      })
  }

  draw() {
    //当前的弧度
    var currentRadian = 0
    //每一次增加的弧度
    var add_radian = Math.PI / 180

    //将画布的圆心坐标移动到其他位置
    this.paint.translate(180, 180)
    //设置画笔颜色
    this.paint.strokeStyle = "#ff0000"
    this.paint.lineWidth = 10
    //将画笔移动到起点
    this.paint.moveTo(this.call_x(currentRadian), this.call_y(currentRadian))

    //周期执行方法
    setInterval(()=>{
      //绘制
      if (currentRadian <= Math.PI * 2) {
        //获取当前的弧度
        currentRadian = currentRadian + add_radian
        var endX = this.call_x(currentRadian)
        var endY = this.call_y(currentRadian)
        this.paint.lineTo(endX, endY)
        //绘制
        this.paint.stroke()
      }else {
        //填充
        this.paint.fillStyle="#ff0000"
        this.paint.fill()
      }
    },30)

  }
  //获取x值
  x=16(sint)3
  call_x(t) {
    return 10*(16 * Math.sin(t) * Math.sin(t) * Math.sin(t))
  }
  y=13cost- 5cos2t-2cos3t-cos4t
  //获取y值
  call_y(t) {
    return -10*(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t))
  }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值