在畫布中繪制多個貝塞爾曲線
[英]drawing more than one bezier path in the canvas
問題描述
我最近開始在畫布上繪畫。 我想畫一個圓形的矩形，里面有一個圓，但是圓連接到了先前的路徑。 如何繪制此圖形，以免兩個圖形都用線連接？
<html>
<div class="canvas-container">
<canvas id="mistakenBezier">canvas not supported</canvas>
<script type="text/javascript">
var canvas = document.getElementById("mistakenBezier");
if(canvas.getContext){
var ctx = canvas.getContext('2d');
//inputs:
var x = 20, y = 20; //rectangle origin
var w = 160, h = 120; //rectangle size
var r = 10; //rectangle corner radius
//draw rounded rect:
ctx.beginPath();
ctx.moveTo(x,y+h-r);
ctx.lineTo(x,y+r); ctx.bezierCurveTo(x,y,x+r,y,x+r,y);
ctx.lineTo(x+w-r,y); ctx.bezierCurveTo(x+w,y,x+w,y+r,x+w,y+r);
ctx.lineTo(x+w,y+h-r); ctx.bezierCurveTo(x+w,y+h,x+w-r,y+h,x+w-r,y+h);
ctx.lineTo(x+r,y+h); ctx.bezierCurveTo(x,y+h,x,y+h-r,x,y+h-r);
ctx.stroke();
//ctx.closePath();
//draw circle
//ctx.beginPath();
//ctx.moveTo(x,y+h-r);
ctx.arc(x+r+10,y+r+10,r,0,Math.PI*2,true);
//ctx.closePath();
ctx.stroke();
}
</script>
</div>
</html>
1 個解決方案
解決方案1
1 已采納 2011-05-07 17:28:55
您看到的線是因為您需要移動到圖形的弧線的起始點，否則您將從當前位置繪制一條線，將其設置為設置弧線開始繪制的位置。
行ctx.moveTo（x + r + 10 + r，y + r + 10）; 需要超出您的要求。
一路走來的例子
<html>
<div class="canvas-container">
<canvas id="mistakenBezier">canvas not supported</canvas>
<script type="text/javascript">
var canvas = document.getElementById("mistakenBezier");
if(canvas.getContext){
var ctx = canvas.getContext('2d');
//inputs:
var x = 20, y = 20; //rectangle origin
var w = 160, h = 120; //rectangle size
var r = 10; //rectangle corner radius
//draw rounded rect:
ctx.beginPath();
ctx.moveTo(x,y+h-r);
ctx.lineTo(x,y+r); ctx.bezierCurveTo(x,y,x+r,y,x+r,y);
ctx.lineTo(x+w-r,y); ctx.bezierCurveTo(x+w,y,x+w,y+r,x+w,y+r);
ctx.lineTo(x+w,y+h-r); ctx.bezierCurveTo(x+w,y+h,x+w-r,y+h,x+w-r,y+h);
ctx.lineTo(x+r,y+h); ctx.bezierCurveTo(x,y+h,x,y+h-r,x,y+h-r);
//draw circle
ctx.moveTo(x+r+10+r,y+r+10);
ctx.arc(x+r+10,y+r+10,r,0,Math.PI*2,true);
ctx.stroke();
}
</script>
</div>
</html>
您也可以在矩形的末端進行筆觸，然后像這樣為圓開始新的路徑。
<html>
<div class="canvas-container">
<canvas id="mistakenBezier">canvas not supported</canvas>
<script type="text/javascript">
var canvas = document.getElementById("mistakenBezier");
if(canvas.getContext){
var ctx = canvas.getContext('2d');
//inputs:
var x = 20, y = 20; //rectangle origin
var w = 160, h = 120; //rectangle size
var r = 10; //rectangle corner radius
//draw rounded rect:
ctx.beginPath();
ctx.moveTo(x,y+h-r);
ctx.lineTo(x,y+r); ctx.bezierCurveTo(x,y,x+r,y,x+r,y);
ctx.lineTo(x+w-r,y); ctx.bezierCurveTo(x+w,y,x+w,y+r,x+w,y+r);
ctx.lineTo(x+w,y+h-r); ctx.bezierCurveTo(x+w,y+h,x+w-r,y+h,x+w-r,y+h);
ctx.lineTo(x+r,y+h); ctx.bezierCurveTo(x,y+h,x,y+h-r,x,y+h-r);
ctx.stroke();
//draw circle
ctx.beginPath()
ctx.arc(x+r+10,y+r+10,r,0,Math.PI*2,true);
ctx.stroke();
}
</script>
</div>
</html>
使用HTML Canvas Bezier曲線繪制美觀（如果不准確）的飛行路徑
[英]Drawing good looking (if not accurate) flight paths with an HTML Canvas Bezier Curve
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.