html5 Leinwand Zeichnung teilweise

Ich mag das Logo oben mit der html5 Leinwand schaffen, aber am Ende des Tages, es erschien nur ein Dreieck.

<!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>

Ich weiß nicht, was falsch macht, dass das macht den Code nicht richtig funktioniert. Ich habe das Internet durchsucht und konnte nichts greifbares finden, das das Problem löst. Jede Hilfe wird geschätzt.

Quelle

2017-11-23 gbenga wale

UPDATE: Try this:

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); 
}

ich um einige Ihrer Code bewegt und es funktioniert für mich jetzt auf Firefox. Es sieht so aus, als hättest du das Pentagon noch nicht in die Leinwand gelegt. Hier ist ein JSFillde: 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(); 
}

Quelle

2017-11-24 03:17:58 ecg8

es nur teilweise auf Chrome zeigt (die zum Testen verwenden) –

Es funktioniert für mich. Vielleicht verstehe ich deine ursprüngliche Frage falsch. Versuchen Sie, das zu erhalten, was Sie zum Zeichnen gezeichnet haben (d. H. Die Leinwand nicht zum Arbeiten bringen konnte), oder möchten Sie die tatsächliche Grafik, die Sie gepostet haben, verwenden (z. B. Hilfe bei den Zeichenfunktionen benötigen)? – ecg8

Versuchen Sie zu bekommen, was Sie zum Zeichnen gezeichnet haben? Ja. Vielleicht sollte ich das Bild hinzufügen, wie es in meinem Browser angezeigt wurde –

html5 Leinwand Zeichnung teilweise

Antwort

Verwandte Themen