zoukankan      html  css  js  c++  java
  • canvas quadraticCurveTo 二次贝塞尔曲线

        ctx.beginPath()
          ctx.moveTo(20, 20)
          ctx.quadraticCurveTo(20, 100, 200, 20) // (x,y ,结束点X,结束点Y)
          ctx.stroke()

    原图:                                                                                   用 二次贝塞尔曲线修改过的效果图为:(有种嘴笑歪了)

                                                        

    具体代码:

      ctx.beginPath()
        ctx.arc(108, 100, 80, Math.PI * 2, 0) // 画脸
    
        ctx.moveTo(46,80)
        ctx.arc(74, 80, 27, Math.PI * 1, 0, false) //左眼框
    
        ctx.moveTo(46,80)
        ctx.quadraticCurveTo(74,60, 102, 80) // (x,y ,结束点X,结束点Y)
    
        ctx.moveTo(82,62)
        ctx.arc(73, 62, 9, Math.PI * 2, 0, false) // 左眼瞳
    
        
    
        ctx.moveTo(116,80)
        ctx.arc(144, 80, 27, Math.PI * 1, 0, false) //右眼框
    
        ctx.moveTo(116,80)
        ctx.quadraticCurveTo(134,60, 172, 80) // (x,y ,结束点X,结束点Y)
    
        ctx.moveTo(152,62)
        ctx.arc(144, 62, 9, Math.PI * 2, 0, false) // 右眼瞳
    
        ctx.moveTo(150,120)
        ctx.arc(100, 120, 50, Math.PI * 1, 0, true) //
    
        ctx.stroke()
  • 相关阅读:
    201141 live the lie until the lie becomes your life
    my php & mysql FAQ
    suger日料财务
    python 应用thrift thrift的监控fb303
    cherryPy学习
    my linux FAQ
    Javascript无阻塞加载方法
    设计模式学习笔记之组合模式模式
    【转】cookie
    C# 多线程
  • 原文地址:https://www.cnblogs.com/wrrISjs/p/15771496.html
Copyright © 2011-2022 走看看