-
Notifications
You must be signed in to change notification settings - Fork 0
/
gradient.html
48 lines (42 loc) · 1.77 KB
/
gradient.html
1
<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="main.css"></head><body> <canvas id="canvas"></canvas> <script> var ca = document.getElementsByTagName('canvas')[0], ctx = ca.getContext('2d'); ca.width = document.body.clientWidth; ca.height = document.body.clientHeight; // var gradient = ctx.createLinearGradient(0, 0, 0, ca.height); // gradient.addColorStop(0, 'rgb(0,0,0)'); // gradient.addColorStop(1, 'rgb(255,255,255)'); // ctx.fillStyle = gradient; // ctx.fillRect(0, 0, ca.width, ca.height); // var gradient = ctx.createRadialGradient(300, 300, 10, 100, 100, 50); // gradient.addColorStop(0, 'rgb(0,0,0)'); // gradient.addColorStop(1, 'rgb(150,150,150)'); // ctx.fillStyle = gradient; // ctx.fillRect(0, 0, ca.width, ca.height); // // var canvasCentreX = ca.width / 2, // canvasCentreY = ca.height / 2, // gradient = ctx.createRadialGradient(canvasCentreX, canvasCentreY, 200, canvasCentreX, canvasCentreY, 300); // gradient.addColorStop(0, 'rgb(255,0,0)'); // gradient.addColorStop(1, 'rgb(0, 0, 0'); // ctx.fillStyle = gradient; // ctx.fillRect(0, 0, ca.width, ca.height); ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(150, 150); ctx.lineTo(50, 150); ctx.closePath(); ctx.stroke(); ctx.fill(); </script></body></html>