canvas図形描画——円弧と円形
canvas円弧の描画
円弧を描くにはcontextを使用します.arc()関数で、6つのパラメータが含まれます.
それぞれを表す:円心x値、円心y値、半径、開始の弧度値、終了の弧度値、(反時計回りかどうか).
例:
複数の円弧を描く必要がある場合はcontextを呼び出す必要がある.beginPath()とcontext.closePath( ) .ただしcontextを用いる.closePath()の場合、自動的にグラフィックが閉じるので、閉じない円弧を描く必要がある場合はcontextを省略することができる.closePath( ).
塗りつぶし円の描画
前のポリゴンと同じようにcontextを使用します.fill()、コード:
円弧を描くにはcontextを使用します.arc()関数で、6つのパラメータが含まれます.
context.arc(
centerx,centery,radius,
startingAngle,endingAngle,
anticlockwise = false
)
それぞれを表す:円心x値、円心y値、半径、開始の弧度値、終了の弧度値、(反時計回りかどうか).
例:
window: onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 800;
context.lineWidth = 5;
context.strokeStyle = "#005588";
context.arc(300, 300, 200, 0, 1.5*Math.PI)
context.stroke();
}
複数の円弧を描く必要がある場合はcontextを呼び出す必要がある.beginPath()とcontext.closePath( ) .ただしcontextを用いる.closePath()の場合、自動的にグラフィックが閉じるので、閉じない円弧を描く必要がある場合はcontextを省略することができる.closePath( ).
塗りつぶし円の描画
前のポリゴンと同じようにcontextを使用します.fill()、コード:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<canvas id="canvas">canvas>
<script>
window: onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 800;
context.lineWidth = 5;
context.strokeStyle = "#005588";
context.arc(300, 300, 200, 0, 1.5*Math.PI)
context.stroke();
context.fillStyle = "red";
context.fill();
}
script>
body>
html>