0

ちょっとした楽しみと途中で学ぶために、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();

誰かがこれを行う方法について私を導くことができますか? HTML5 は、html などに関する私の知識の点で非常に飛躍的であるため、どんな助けも大歓迎です。

4

1 に答える 1

2

createLinearGradientグラデーションが続く線を描くと考えると：

// imaginary line goes from x1,y1 to x2,y2 (the gradient will go there also)
var gradient=createLinearGradient(  x1,y1,  x2,y2 );

この線を中央上から中央下に引くと、グラデーションは上から下になります。

var orangeGradient = context.createLinearGradient(
    canvas.width/2, 0, canvas.width/2, canvas.height);

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/LLGtc/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var context = canvas.getContext('2d');

    context.arc(canvas.width/2, canvas.height/2, canvas.width/2-2, 0, Math.PI*2,false);
    context.closePath();

    var orangeGradient = context.createLinearGradient(canvas.width/2, 0, canvas.width/2, canvas.height);
    orangeGradient.addColorStop(0, '#ffdd00');   
    orangeGradient.addColorStop(1, '#cc6600');
    context.fillStyle = orangeGradient;
    context.fill();


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=400 height=400></canvas>
</body>
</html>
于 2013-06-06T16:51:59.160 に答える