Question

嘿伙计们，我有以下设计来创建

现在我通常在这种情况下使用图像，但只是想知道这是否可能以任何其他方式使用I.E.也许帆布？我刚刚开始学习画布，所以我不能肯定地说。

HTML：

<div class='bnr'></div>
<div class='main'></div>

CSS：

.bnr {
  height: 35vh;
  background: #990853;
}

.main {
  background: #fff;
  height: 80vh;
}

现在我如何添加这些曲线除了使用图像？

谢谢。

Answer 1

<body onload="draw();">
  <canvas id="canvas" width="985px" height="300px" ></canvas>
</body>

<script>
function draw() {
    var canvas = document.getElementById('canvas');
    if (canvas.getContext) {

        var ctx = canvas.getContext('2d');

        ctx.beginPath();
        ctx.moveTo(10,10);
        ctx.lineTo(985,10);
        ctx.lineTo(985,245);
        ctx.quadraticCurveTo(965,270,965,280);
        ctx.quadraticCurveTo(920,130,640,150);
        ctx.quadraticCurveTo(530,160,350,190);
        ctx.quadraticCurveTo(210,220,10,190);
        ctx.lineTo(10,10);
        ctx.stroke();
        ctx.strokeStyle="#FFF";
        ctx.fillStyle = "green";
        ctx.fill();


        ctx.beginPath();
        ctx.moveTo(10,10);
        ctx.lineTo(985,10);
        ctx.lineTo(985,220);
        ctx.quadraticCurveTo(965,230,955,255);
        ctx.quadraticCurveTo(920,130,640,135);
        ctx.quadraticCurveTo(510,140,350,170);
        ctx.quadraticCurveTo(190,200,10,160);
        ctx.lineTo(10,10);
        ctx.stroke();
        ctx.strokeStyle="#FFF";
        ctx.fillStyle = "#990853";
        ctx.fill();



        ctx.beginPath();
        ctx.arc(805, 150, 50, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.strokeStyle="#FFF";
        ctx.fillStyle = "#FFF";
        ctx.fill();



        ctx.beginPath();
        ctx.arc(805, 150, 45, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.strokeStyle="#FFF";
        ctx.fillStyle = "#ce758b";
        ctx.fill();

    }
}

</script>

以前的代码看起来如何：

Answer 2

您可以使用画布获得所需的exaclty。使用param($installPath, $toolsPath, $package, $project) . .\Functions.ps1 Write-HelloWorld 1,2作为背景颜色和曲线。

您可以了解有关canvas的更多信息：

canvas：http://www.w3schools.com/html/html5_canvas.asp

曲线：http://www.w3schools.com/tags/canvas_beziercurveto.asp和http://www.w3schools.com/tags/canvas_quadraticcurveto.asp

fill：http://www.w3schools.com/tags/canvas_fill.asp

很多教程：http://www.html5canvastutorials.com/

试试我的演示： https://jsfiddle.net/pjxgLkm7/2/

或者

＆＃13;

fill

＆＃13;

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.bezierCurveTo(0,50,20,50,200,0);
ctx.fillStyle = "#990853";
ctx.fill();
ctx.strokeStyle = '#990853';
ctx.stroke();

＆＃13;

在部分之间创建弯曲的叠加。

2 个答案: