1.canvasベース
16135 ワード
1.canvasの導入
この行はcanvasを導入してwidthとheigthを設定してキャンバスの幅を設定し、styleは枠線の色の大きさと内側の余白を設定します
canvas要素自体には描画能力がありません.すべての描画はJavaScriptの内部で行う必要があります.
2.直線を描く
2つのグラフィックを描いたので、ステータスマシンの設定が互いに影響しないようにbeginpathとclosepathで解決し、この2つの方法で点を囲む設定で、canvasの座標軸は左上角を原点とし、水平右をx軸正方向とし、垂直下をy軸正方向とする
3.円弧を描く
<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display: block;margin: 50px auto;">
この行はcanvasを導入してwidthとheigthを設定してキャンバスの幅を設定し、styleは枠線の色の大きさと内側の余白を設定します
canvas要素自体には描画能力がありません.すべての描画はJavaScriptの内部で行う必要があります.
var canvas = document.getElementById("canvas"); //
var context = canvas.getContext("2d"); // context
2.直線を描く
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display: block;margin: 50px auto;">
canvas>
<script>
window.onload = function(){
//js
var canvas = document.getElementById("canvas");
canvas.width = 1024;
canvas.height = 768;
if(canvas.getContext("2d")){
var context = canvas.getContext("2d");
// context
}
else{
alert(' canvas, ');
}
//
context.beginPath();
context.moveTo(100, 100);
context.lineTo(700, 700);
context.lineTo(100, 700);
context.lineTo(100, 100);
context.closePath();
context.fillStyle = "rgb(2, 100, 30);" //
context.fill(); //
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke(); //
//
context.beginPath();
context.moveTo(200, 100);
context.lineTo(700, 600);
ontext.closePath();
context.strokeStyle = "black";
context.stroke();
}
script>
body>
html>
2つのグラフィックを描いたので、ステータスマシンの設定が互いに影響しないようにbeginpathとclosepathで解決し、この2つの方法で点を囲む設定で、canvasの座標軸は左上角を原点とし、水平右をx軸正方向とし、垂直下をy軸正方向とする
3.円弧を描く
<script>
window.onload = function(){
//js
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
// context
context.lineWidth = 5;
context.strokeStyle = "#005588";
// true
context.arc(300, 300, 200, 0, 1.5*Math.PI);// （300,300） ，200 ， 0 1.5pi
context.stroke();
}
script>