效果图如下:
代码如下
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();
}