canvas 实现波浪线--水波动态效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chyuanrufeng/article/details/80756033

效果图如下：

代码如下

import QtQuick 2.6
import QtQuick.Window 2.2
import CanvansItem 1.0

import "./Drawjs.js" as Djs

Window {
    visible: true
    width: 1500
    height: 700
    title: qsTr("Hello World")

    //波形
    Canvas{
        id : canvans;
        //width: 1000; height: 700
        anchors.fill: parent
        renderStrategy : Canvas.Cooperative
        renderTarget: Canvas.FramebufferObject

        onPaint: {
            var ctx = getContext("2d");
            Djs.setCanvans(ctx,canvans);
            Djs.repainter();
        }
    }
    Timer{
        interval: 200; running: true; repeat: true
         onTriggered: {
             canvans.requestAnimationFrame(Djs.repainter);
             //canvans.requestPaint();
         }
    }
}

Drawjs.js脚本如下：

var ctx;
var canvas;
var width,height;
var linewidth = 20;
var angel = 20;

var movestep = 0 ;

function setCanvans(context,cvs)
{
    ctx = context;
    canvas = cvs;

    //console.log(canvas.width,canvas.height);
}

function clearAll()
{
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function repainter()
{
    clearAll();
    angel = Math.random()*360;
    angel = angel.toFixed(0);

    //水形波纹
    drawWaterRipple();

}


function drawWaterRipple()
{
    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle="red"
    ctx.fillStyle = "#BFF8F9"

    var stratx,endx;
    var straty,endy;
    var i = Math.random()*5;
    var length = 100*5;

    ctx.moveTo(100,100);
    for (var j = 0; j < length; j+=5)
    {
        if (j == 0)
        {
           stratx = 100;
           straty = 100+Math.sin(i)*10;
           //ctx.moveTo(stratx,straty);
        }

        ctx.lineTo(100+j,100+Math.sin(i)*10);
        endx = 100+j;
        endy = 100+Math.sin(i)*10;
        i+=0.15;
    }

    endy = 300;
    ctx.lineTo(endx,endy+200);
    ctx.lineTo(stratx,endy+200);
    ctx.lineTo(stratx,straty);

    ctx.fill();
    ctx.stroke();
    ctx.restore();

    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle="green"
    ctx.arc(349,100,248,0,Math.PI);
    ctx.stroke();
}