使用css或javascript绘制曲线？_Javascript_Css

使用css或javascript绘制曲线？

javascript css

使用css或javascript绘制曲线？,javascript,css,Javascript,Css,有没有可能不使用图像，只使用css和/或javascript就可以画出下面的曲线？对不起，它很小而且是浅灰色的给这个小家伙贴一张照片真让我心痛！谢谢你的阅读您可以在字体中使用交替的\和/字符，使它们以您想要的方式显示。使用Times New Roman，字符串\/\/\/\/\/在图像中显示为锯齿形曲线。它几乎可以在任何浏览器中使用，包括禁用JavaScript的浏览器、不支持SVG的过时浏览器，甚至像Lynx这样甚至不能显示图像的命令行浏览器如果这不是您想要的，您可以使用JavaScr

有没有可能不使用图像，只使用css和/或javascript就可以画出下面的曲线？对不起，它很小而且是浅灰色的

给这个小家伙贴一张照片真让我心痛！谢谢你的阅读

您可以在字体中使用交替的\和/字符，使它们以您想要的方式显示。使用Times New Roman，字符串\/\/\/\/\/在图像中显示为锯齿形曲线。它几乎可以在任何浏览器中使用，包括禁用JavaScript的浏览器、不支持SVG的过时浏览器，甚至像Lynx这样甚至不能显示图像的命令行浏览器

如果这不是您想要的，您可以使用JavaScript在HTML5画布上绘制，或者使用@sawa指出的SVG。

这很有效，试试看

使用base64 url：

div {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANAAAAA8BAMAAADlDCm+AAAAElBMVEX////Jycna2trv7+/k5OTl5eVsfzX+AAAAUElEQVRYw+3HsQnAMAxE0RMkvXbwBp7AI2T/aWIC6a68QIr/jo+QAAAAgG+0VC6lDWm6lFZSu5R2rGfX3r7nen/Fddny5rDlVdsAAAAA/MoNzbkI9oz70dAAAAAASUVORK5CYII=');
}

您可以在此处压缩png：将其传输到base64代码：

你甚至不需要CSS或JavaScript。在HTML代码中编写SVG对象。如果要使用CSS，可以将SVG设计移到CSS中。

这里有两个选项：

演示：

注意：仅在Mac上运行的Chrome中测试。在使用之前，请在整个目标浏览器集上进行测试。如果需要，请更改第二个选项中的字体

选择1

选择2

您可以使用以下内容：

    <html>
<head>
<script type="text/javascript">
function drawShape(){
  var canvas = document.getElementById('mycanvas');

  if (canvas.getContext){

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

    ctx.beginPath();
    ctx.moveTo(0,10);
    ctx.lineTo(10,0);
    ctx.moveTo(10,0);
    ctx.lineTo(20,10);
    ctx.moveTo(20,10);
    ctx.lineTo(30,0);
    ctx.moveTo(30,0);
    ctx.lineTo(40,10);
    ctx.moveTo(40,10);
    ctx.lineTo(50,0);
    ctx.moveTo(50,0);
    ctx.lineTo(60,10);

    ctx.stroke();

  } 
}
</script>
</head>
<body onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

小提琴：仅CSS 您可以使用CSS3

.波浪{ 背景：重复线性梯度45度，透明，透明9px，CCC 2px，CCC 12px，重复线性梯度45度，透明，透明9px，CCC 2px，CCC 12px；高度：8px；宽度：98px； }

图像无法加载javascript必须是无视觉效果的，它只是使功能在浏览器视觉情况下更加动态。@nnnnnn是我所说的，javascript动态使事情变得更加动态，那么问题将与他具体的画布而不是javascript有关。我认为使用base64 url是最合理和方便的。

<span class="curvy2">^^^^^^^</span>

span.curvy2 {
    letter-spacing: -1px;
    font-size: 10px;
    color: #888;
    -webkit-transform-origin: top left;
    -webkit-transform: scale(1.6,1);
    display: inline-block;
    font-weight: lighter;
    font-family: 'Helvetica Neue', 'Segoe UI', Helvetica;
}

    <html>
<head>
<script type="text/javascript">
function drawShape(){
  var canvas = document.getElementById('mycanvas');

  if (canvas.getContext){

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

    ctx.beginPath();
    ctx.moveTo(0,10);
    ctx.lineTo(10,0);
    ctx.moveTo(10,0);
    ctx.lineTo(20,10);
    ctx.moveTo(20,10);
    ctx.lineTo(30,0);
    ctx.moveTo(30,0);
    ctx.lineTo(40,10);
    ctx.moveTo(40,10);
    ctx.lineTo(50,0);
    ctx.moveTo(50,0);
    ctx.lineTo(60,10);

    ctx.stroke();

  } 
}
</script>
</head>
<body onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>