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()
  • 相关阅读:
    JAVA语法之小结
    JAVA之经典Student问题1
    Android之动画1
    Android之屏幕测试
    Android之点击切换图片
    Android之标签选项卡
    Android简单计算器
    Javascript之相册拖动管理
    Javascript之改变盒子颜色
    CSS之照片翻转
  • 原文地址:https://www.cnblogs.com/wrrISjs/p/15771496.html
Copyright © 2011-2022 走看看