O'Reilly logo

Game Programming using Qt 5 Beginner's Guide - Second Edition by Lorenz Haas, Witold Wysota, Pavel Strakhov

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – Making the diagram more colorful

The diagram serves its purpose, but it looks a bit dull. Add some shine to it by defining three new color properties in the canvas object—color, topColor, bottomColor—and setting their default values to black, red, and blue, respectively:

property color color: "black"
property color topColor: "red"
property color bottomColor: "blue"

Then, let's make use of these properties by extending onPaint implementation:

onPaint: { //... // fill: ctx.beginPath(); ctx.moveTo(0, 0); var i; for(i = 0; i < pointsToDraw.length; i++) { ctx.lineTo(i, -pointsToDraw[i] * canvas.height/2); } ctx.lineTo(i, 0); var gradient = ctx.createLinearGradient( 0, -canvas.height / 2, 0, canvas.height / 2); gradient.addColorStop(0.1, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required