HTML5でdrawImage（）を使用して画像を描画する方法は？
HTML5 drawImage（）メソッドは、キャンバス上に画像、キャンバス、またはビデオを描画するために使用されます。また、画像の一部を描画します。また、画像サイズを拡大または縮小するために使用することもできます。
| Sr.No | drawImage（）パラメータと説明 |
|---|---|
| 1 | img 画像、キャンバス、またはビデオを指定します。 |
| 2 | sx xクリッピングを開始する場所を調整します。これはオプションです。 |
| 3 | sy yクリッピングを開始する場所を調整します。これはオプションです。 |
| 4 | 幅 クリップされた画像の幅。これはオプションです。 |
| 5 | 高さ クリップされた画像の高さ。これはオプションです。 |
| 6 | x 画像がキャンバス上に配置されるx座標 |
| 7 | y 画像がキャンバス上に配置されるy座標 |
| 8 | 幅 使用する画像の幅。 |
| 9 | 高さ 使用する画像の高さ。 |
次のコードを実行して、drawImage（）メソッドを使用して画像を描画する方法を学ぶことができます-
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
var pattern = new Image();
function animate() {
pattern.src = '/html5/images/pattern.jpg';
setInterval(drawShape, 100);
}
function drawShape() {
// get the canvas element using the DOM
var canvas = document.getElementById('newCanvas');
// 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.fillStyle = 'rgba(0,0,0,0.4)';
ctx.strokeStyle = 'rgba(0,153,255,0.4)';
ctx.save();
ctx.translate(150,150);
var time = new Date();
ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ( (2*Math.PI)/6000)*time.getMilliseconds() );
ctx.translate(0,28.5);
ctx.drawImage(pattern,-3.5,-3.5);
ctx.restore();
}
else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body onload = "animate();">
<canvas id = "newCanvas" width = "400" height = "400"></canvas>
</body>
</html> -
HTML5でarc（）を使用して円を描く方法は？
arc（）メソッドは、canvas要素を使用してHTML5で円を作成するために使用されます。 arc（）メソッドを使用する円の場合、開始角度を0に、終了角度を2*Math.PIに使用します。 これがarc（）メソッドのパラメータ値です- S。いいえ パラメータ 説明 1 x x座標 2 y y座標 3 r 円の半径 4 startingAngle ラジアン単位の開始角度 5 endingAngle ラジアン単位の終了角度 6 反時計回り（True / False）
-
HTML5でlineTo（）を使用して線を引く方法は？
HTMLで線を描画するには、canvas要素を使用します。キャンバスでは、lineTo（）メソッドを使用して線を描画します。 lineTo（）メソッドには、線を配置するxおよびyパラメーター値が含まれています。 例 次のコードを実行して、HTML5でlineTo（）を使用して線を引くことができます- <!DOCTYPE html> <html> <head> <title>HTML Canvas</title> </head>