我正在参加「初夏创意投稿大赛」详情请看:初夏创意投稿大赛
夏天 大海的夜晚是什么样子,我们今天就来用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 和下面图片对应的坐标
比较难画就是海面上的那个弯弯的明月了
我直接贴代码了
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这个弧度的半径
想求这个R的值R=AC*AH/HC
dis的方法
function dis(x1,y1,x2,y2) {
return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))
}
下面是我的代码块