如何在html5画布上绘制？

Question

如何在html5画布上绘制？ 我只能做有圆角的矩形。

 <canvas id="myCanvas" width="578" height="200"></canvas>
 <script type="text/javascript">
 function roundRect(x, y, w, h, radius)
 {
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var r = x + w;
 var b = y + h;
 context.beginPath();
 context.strokeStyle="green";
 context.lineWidth="4";
 context.moveTo(x+radius, y);
 context.lineTo(r-radius, y);
 context.quadraticCurveTo(r, y, r, y+radius);
 context.lineTo(r, y+h-radius);
 context.quadraticCurveTo(r, b, r-radius, b);
 context.lineTo(x+radius, b);
 context.quadraticCurveTo(x, b, x, b-radius);
 context.lineTo(x, y+radius);
 context.quadraticCurveTo(x, y, x+radius, y);
 context.stroke();
 }
 roundRect(10, 10, 200, 100, 20);
 </script>

Answer 1

如果您更喜欢圆角，则有一种更简单的方法：您可以使用上下文方法arcTo()例如绘制一个带有圆角的矩形，您可以编写：

 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");
 
 function roundRect(x, y, w, h, r){

 var x0 = x, y0 = y;
 var x1 = x0+w, y1 = y0;
 var x2 = x1, y2 = y0+h;
 var x3 = x, y3 = y2;
							
 ctx.strokeStyle = "green";
 ctx.lineWidth=4;
 ctx.beginPath();
 ctx.moveTo(x3,y3-r);
						
 ctx.arcTo(x0,y0,x1,y1,r);
 ctx.arcTo(x1,y1,x2,y2,r);
 ctx.arcTo(x2,y2,x3,y3,r);
 ctx.arcTo(x3,y3,x0,y0,r);
 ctx.stroke(); 
   }
		

roundRect(10, 10, 200, 100, 10);

<canvas id="myCanvas" width="578" height="200"></canvas>

但是，可以使用2个简单的画布矩形和SVG滤镜来完成2个矩形的图像的绘制：

 var canvas = document.getElementById("c");
 var ctx = canvas.getContext("2d");
 ctx.fillStyle = "green";
 ctx.fillRect(10, 10, 100, 100)
 ctx.fillRect(100, 100, 30, 30)

canvas{filter: url(#goo);}

<svg width="1" height="1">
<defs>
<filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />
      <feColorMatrix in="blur" mode="matrix" 
                     values="1 0 0  0   0  
                             0 1 0  0   0  
                             0 0 1  0   0  
                             0 0 0 40 -28" result="goo" />
      
    </filter> 
  </defs>
</svg>
<canvas id="c" width="578" height="200"></canvas>

如果您不熟悉Gooey效果，则可以阅读以下文章：https://css-tricks.com/gooey-effect/

我希望这对您有帮助