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>

我不知道做错了什么导致代码无法正常工作。我已经在互联网上搜索过，但找不到任何可以解决问题的切实可行的方法。任何帮助将不胜感激。

心电图8

更新：试试这个：

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

我移动了你的一些代码，现在它在 Firefox 上对我有用。看起来您还没有将五边形放入画布中。这是一个 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();
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。