夏天波浪起伏的大海夜晚我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛夏天大海的夜晚是什么样子，我们今天就来

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

夏天大海的夜晚是什么样子，我们今天就来用canvas画一个，虽有点儿童画风，大家凑活着看吧，主要怎么用canvas话吧

首先需要画个黑色的背景

    ctx.fillStyle="black"
    ctx.fillRect(0,0,canvas.width,canvas.height) // 黑色铺满这个画布

然后需要画一个大海波浪，这个波浪其实就是一个曲线，我用的是贝塞尔三次曲线,大家需要有点想象力，然后在去调整每个点的坐标

    ctx.moveTo(0, 289); // x1 y1 其实点
    ctx.bezierCurveTo(118, 200, 231, 439, 500, 300) x2,y2,x3,y3,x4,y5 和下面图片对应的坐标

贝塞尔.png 比较难画就是海面上的那个弯弯的明月了

我直接贴代码了

    function moon1(ctx,d,x,y,R,rot ) { // ctx 全局上下文 d 控制点的横坐标 x y 这轮弯月位置 R 这轮弯月的半径 rot 这轮弯月旋转的角度
        ctx.save() // 当前的状态就被推送到栈中保存
        ctx.translate(x,y) // 月亮的位置
        ctx.rotate(rot*Math.PI/180) // 旋转的角度
        ctx.scale(R,R) // 月亮的半径
        pathM(ctx,d) // 这个是画月亮的函数
        ctx.fillStyle = "#fb5" // 填充月亮的颜色
        ctx.fill() // 填充
        ctx.restore() // 上一次保存的状态就从栈中弹出，所有设定都恢复
    }

下面我们需要分析月亮的画法

下面是花月亮代码

  ctx.beginPath()
  ctx.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true) // 圆的外弧形 
  ctx.moveTo(0,-1) // 圆弧的起点文职
  ctx.arcTo(d,0,0,1, dis(0,-1,d,0)*1/d) // d控制点 切点 好0 1 x1,y1,x2,y2,r半径
  ctx.closePath();

还有一点计算圆弧的月亮内圆的半径也比较麻烦用到了三角函数tan 看截图我们主要求的就是OA这个弧度的半径

三角函数.png

想求这个R的值R=AC*AH/HC

dis的方法

    function dis(x1,y1,x2,y2) {
        return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))
    }

下面是我的代码块