canvas基本図形線の描画
canvas要素は、Webページにグラフィックを描画するために使用されます.HTML 5のcanvas要素は、JavaScriptを使用してWebページに画像を描画します.キャンバスは長方形の領域で、各ピクセルを制御できます.canvasには、パス、長方形、円形、文字、および画像を追加する方法がいくつかあります.
canvas要素自体には描画能力がありません.すべての描画はJavaScriptの内部で行う必要があります.
canvas要素自体には描画能力がありません.すべての描画はJavaScriptの内部で行う必要があります.
html>
canvas
// Canvas
function Check_Canvas(){
// getContext()
var Canvas = document.getElementById("check_canvas");
if(Canvas.getContext){
alert(' Canvas');
}else{
alert(' Canvas');
}
}
/* */
function rectCanvas(){
/* canvas id canvas */
var canvas = document.getElementById("rectCanvas");
/* getContext Context 2D */
var Rect_Canvas = canvas.getContext("2d");
// getContext（"2D"） HTML5 （canvasRenderingContext2D ）
//fillStyle 、 #132005
Rect_Canvas.fillStyle="#132005";
//fillRect() “ ” 。 fillStyle ，
。 filerect()
Rect_Canvas.fillRect(25,25,100,15);// X:25 ; Y:25 :100 ：15
}
//
function line(){
var Line_Canvas = document.getElementById("line");
var Line = Line_Canvas.getContext("2d");
// ， moveTo lineTo stroke
Line.moveTo(100,0);// 。 100,0 。 line
Line.lineTo(50,50);// 50,50 canvas
Line.lineTo(100,100)
Line.lineTo(50,150);
Line.stroke(); //
}
//
function Stroke_Rect(){
var Stroke = document.getElementById("Stroke_Rect").getContext("2d");
Stroke.strokeStyle = "#789654";// ( )
Stroke.strokeRect(10,10,60,100);// X:10 Y:10 W:60 H:100
}
//
function Round(){
var Round = document.getElementById("Round").getContext("2d");
// beginPath arc closePath fill 4
// 。
Round.fillStyle = "#c444a2";
Round.beginPath();
// 。 closePath beginPath closePath arc
Round.arc(150,75,50,0,Math.PI*2,true);
//arc 。 。
arc(X,Y,radius,startAngle,endAngle,anticlockwise); X Y xy 。 r
adius startAngle 。endAngle anticlockwise （ ）
Round.closePath();// beginPath
Round.fill();
}
//
function Round_Stroke(){
var R_Stroke = document.getElementById("Round_Stroke").getContext("2d");
//
R_Stroke.strokeStyle = "#FF00FF";
R_Stroke.beginPath();//
R_Stroke.arc(150,75,50,0,Math.PI*2,true);
R_Stroke.closePath();
R_Stroke.stroke();
}
//
function Arc(){
var Arc = document.getElementById("Arc").getContext("2d");
Arc.strokeStyle = "#FF00FF";
for(var i = 1;i<110;i++){
Arc.beginPath();//
Arc.arc(150,75,50-i*3,0,Math.PI*2/3,true);
Arc.stroke();
}
}