canvas 實現波浪線--水波動態效果
阿新 • • 發佈:2018-11-08
效果圖如下:
程式碼如下
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(); }