HTML5キャンバスでベジェ曲線を描く
はい、HTMLキャンバスのbezierCurveTo（）メソッドを使用して、HTML5でベジェ曲線を描画します。
例
次のコードを実行して、キャンバスでベジェ曲線を描くことができます。
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script>
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html> 出力
-
HTML5キャンバスで画像を使用する方法は？
HTML5 タグは、スクリプトを使用してグラフィックやアニメーションなどを描画するために使用されます。 HTML5で導入された新しいタグです。 HTML5キャンバスで画像を使用するには、drawImage（）メソッドを使用します。このメソッドは、指定された画像をキャンバスに描画します。 次のコードを実行して、HTMLCanvasで画像を使用する方法を学ぶことができます。ここで、画像は画像またはキャンバスオブジェクトへの参照です。 xとyは、画像を配置するターゲットキャンバス上の座標を形成します。 例 <!DOCTYPE HTML> <html>
-
ベジェ曲線を描画するためのHTMLキャンバス
ベジェ曲線を描画するには、HTMLでBezierCurveTo（）メソッドを使用します。最初に構文を見てみましょう- ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); ここで cp1x −最初のベジェ制御点のx座標を表します cp1y −最初のベジェ制御点のy座標を表します cp2x −2番目のベジェ制御点のx座標を表します cp2y −2番目のBexierコントロールポイントのy座標を表します x −終点のx座標を表します y −終点のy座標を表します 以下は例です- 例 <!DOCTYPE html&g