我正在尝试在 HTML5 画布中重新创建我的网站徽标,以获得一些乐趣并在此过程中学习。到目前为止,我已经创建了基本形状,但我不确定如何为圆形添加渐变,所以它从顶部的浅橙色变为底部的深橙色。这是我到目前为止所拥有的:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = canvas.width / 2 - 2;
// circle
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#FF9000';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#FF9000';
context.stroke();
// top line
context.beginPath();
context.moveTo(canvas.width / 2 - canvas.width / 4, canvas.height / 2 - canvas.height / 4);
context.lineTo(canvas.width / 2 + canvas.width / 4, canvas.height / 2 - canvas.height / 4);
context.lineWidth = canvas.width / 7;
context.strokeStyle = '#FFFFFF';
context.lineCap = 'round';
context.stroke();
// short middle line
context.beginPath();
context.moveTo(canvas.width / 2 - canvas.width / 8, canvas.height / 2);
context.lineTo(canvas.width / 2 + canvas.width / 8, canvas.height / 2);
context.lineWidth = canvas.width / 7;
context.strokeStyle = '#FFFFFF';
context.lineCap = 'round';
context.stroke();
// bottom line
context.beginPath();
context.moveTo(canvas.width / 2 - canvas.width / 4, canvas.height / 2 + canvas.height / 4);
context.lineTo(canvas.width / 2 + canvas.width / 4, canvas.height / 2 + canvas.height / 4);
context.lineWidth = canvas.width / 7;
context.strokeStyle = '#FFFFFF';
context.lineCap = 'round';
context.stroke();
有人可以指导我如何做到这一点吗?就我对 html 等方面的知识而言,HTML5 是一个很大的飞跃,因此我们将不胜感激。