http://wacomkorea.tistory.com/624
Canvasは、ブラウザ上に図を描画するための仕様です。
・htmlにCanvas要素を用意
・Canvas要素をjavascriptから参照し、
・描画2d用のContextオブジェクトを取得
１．短形の描画
・現在のpathをリセット
・ブラウザに短形を描画
・塗りつぶし：red
・枠：black
・くり抜く
・pathクローズ
２．テキストの描画
・フォント指定(bold italic サイズ、フォント種類)
・輪郭線のみのテキスト描画
・塗りつぶしのテキスト描画（文字色設定）
３．線の描画
・指定の地点で新規のサブパスを生成
・現在のパスに指定の地点を加え、直前の地点を直線で接続
４．円の描画
１．短形の描画
<html>
中略
<div>
<canvas id="sample" width="500" height="2000" ></canvas>
</div>
中略
<script type="text/javascript">
(function () {
var canvasContext = document.getElementById('sample');
var context = canvasContext.getContext('2d');
context.beginPath();
context.fillStyle = 'red';
context.strokeStyle = "#000000";
context.rect(20,50,400,500);
context.fill();
context.lineWidth = 5;
context.stroke();
context.clearRect(50,80,400,50);
context.stroke();
context.closePath();
})();
</script>
<script type="text/javascript">
(function(){
var canvasEl = document.getElementById('sample');
var ctx = canvasEl.getContext('2d');
ctx.beginPath();
ctx.fillStyle="black";
ctx.fillRect(10,20,100,150);
ctx.strokeRect(20,30,100,150);
ctx.closePath();
})();
</html>
2.TEXT
<script type="text/javascript">
(function (){
var canvasEl = document.getElementById('sample');
var ctx = canvasEl.getContext('2d');
ctx.font = "bold italic 100px sans-serif";
ctx.strokeStyle = "blue";
ctx.strokeText('TEXT', 200, 100);
ctx.font = "bold italic 50px sans-serif";
ctx.fillStyle="#00FF00";
ctx.fillText('text', 300,200);
})();
</script>
３．線の描画
<script type="text/javascript">
(function(){
var canvasEl = document.getElementById('sample');
var ctx = canvasEl.getContext('2d');
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.moveTo(0, 0);
ctx.lineTo(90, 90);
ctx.lineTo(0, 180);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle="white";
ctx.moveTo(200, 200);
ctx.lineTo(200,300);
ctx.stroke();
ctx.closePath();
})();
</script>
댓글 없음:
댓글 쓰기