HTML5のキャンバスは、部分的に

私はHTML5のキャンバスを使用して、上記のロゴを作成したいが、一日の終わりに、それだけで三角形を表示します。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Coa</title> 
    </head> 
    <body> 
     <canvas id="logo" width="900" height="80"> 
      <h1>COA</h1> 
     </canvas> 

     <script> 
     //function that draw the logo. I create a JavaScript function for drawing the 
     var drawLogo = function(){ 
      var canvas = document.getElementById('logo'); 
      var context = canvas.getContext("2d"); 

      //applying gradient 
      var gradient = context.createLinearGradient(0, 0, 0, 40); 
      gradient.addColorStop(0, "#aa0000"); 
      gradient.addColorStop(1, "#ff0000"); 

      // use the strokepath,beginPath() and closePath() methods to start drawing a line, stroke and close when finish 
      context.fillStyle = gradient; 
      context.strokeStyle = gradient; 

      context.lineWidth = 2; 
      context.beginPath(); 
      context.moveTo(0, 40); 
      context.lineTo(30, 0); 
      context.lineTo(60, 40); 
      context.lineTo(285, 40); 

      context.fill(); 
      context.closePath(); 

      //adding text 
      context.font = "italic 40px 'Arial'"; 
      context.fillText("Coa", 60,36); 

      //Moving the Origin so as to fit the square under the triangle 
      context.save(); 
      context.translate(20, 20); 
      context.fillRect(0, 0, 20, 20); 

      //use a path to draw the inner triangle 
      context.fillStyle("#ffffff"); 
      context.strokeStyle("#ffffff"); 

      context.lineWidth = 2; 
      context.beginPath(); 
      context.moveTo(); 
      context.lineTo(0, 20); 
      context.lineTo(10, 0); 
      context.lineTo(20, 20); 
      context.lineTo(0, 20); 

      context.fill(); 
      context.closePath(); 
      context.restore(); 
     }; 

     //Then invoke this method after first checking for the existence of the <canvas> element 
     var canvas = document.getElementById("logo"); 

     if(canvas.getContext){ 
      drawLogo(); 
     } 

    </script> 
    </body> 
</html>

私は正常に動作していないコードを作ることが間違っやっているのか分かりません。私はインターネットを検索しましたが、問題を解決するための具体的なものは見つかりませんでした。どんな助けもありがとう。

出典

2017-11-23 gbenga wale

UPDATE：私はあなたのコードの一部の周りに移動し、それがFirefoxの上で私のために動作するようになりました

if (document.getElementById('logo')) { 
var canvas = document.getElementById("logo"); 
var context = canvas.getContext("2d"); 
//applying gradient 
var gradient = context.createLinearGradient(0, 0, 0, 40); 
gradient.addColorStop(0, "#aa0000"); 
gradient.addColorStop(1, "#ff0000"); 
context.strokeStyle = gradient; 
context.fillStyle = gradient; 
context.lineWidth = 2; 
context.beginPath(); 
context.moveTo(0, 40); 
context.lineTo(30, 0); 
context.lineTo(60, 40); 
context.lineTo(285, 40); 
context.stroke(); 
context.fillRect(20, 20, 20, 20); 
context.beginPath(); 
context.moveTo(30, 20); 
context.lineTo(37, 28); 
context.lineTo(35, 40); 
context.lineTo(25, 40); 
context.lineTo(23, 28); 
context.lineTo(30, 20); 
context.fillStyle="#ffffff"; 
context.fill(); 
context.fillStyle="#000000"; 
context.font = "italic 40px Arial"; 
context.fillText("coa", 60,36); 
}

：これを試してみてください。あなたはまだペンタゴンをキャンバスに置いていないようです。 https://jsfiddle.net/o289buyk/

if (document.getElementById('logo')) { 
var canvas = document.getElementById("logo"); 
var context = canvas.getContext("2d"); 
//applying gradient 
var gradient = context.createLinearGradient(0, 0, 0, 40); 
gradient.addColorStop(0, "#aa0000"); 
gradient.addColorStop(1, "#ff0000"); 
// use the strokepath,beginPath() and closePath() methods to start drawing a line, stroke and close when finish 
context.fillStyle = gradient; 
context.strokeStyle = gradient; 
context.lineWidth = 2; 
context.beginPath(); 
context.moveTo(0, 40); 
context.lineTo(30, 0); 
context.lineTo(60, 40); 
context.lineTo(285, 40); 
context.fill(); 
context.closePath(); 
//adding text 
context.font = "italic 40px 'Arial'"; 
context.fillText("Coa", 60,36); 
//Moving the Origin so as to fit the square under the triangle 
context.save(); 
context.translate(20, 20); 
context.fillRect(0, 0, 20, 20); 
//use a path to draw the inner triangle 
context.fillStyle("#ffffff"); 
context.strokeStyle("#ffffff"); 
context.lineWidth = 2; 
context.beginPath(); 
context.moveTo(); 
context.lineTo(0, 20); 
context.lineTo(10, 0); 
context.lineTo(20, 20); 
context.lineTo(0, 20); 
context.fill(); 
context.closePath(); 
context.restore(); 
}

出典

2017-11-24 03:17:58 ecg8

それはChromeのみに部分的に示すことは、私の作品 –

を（テスト用に使用しています）：ここではJSFilldeです。多分私はあなたの元の質問を誤解しています。描画するコードを取得しようとしていますか（つまり、キャンバスを動かすことができなかったか）、投稿した実際のグラフィックを描画したいと思っていますか（つまり、描画関数のヘルプが必要ですか？ – ecg8

あなたが描いたコードを取得しようとしていますか？はい。たぶん私はそれが私のブラウザに表示される方法の画像を追加する必要があります –

HTML5のキャンバスは、部分的に

答えて

関連する問題