HTML5 캔버스를 사용해 보았습니다 - 자바 스크립트를 어디에 쓰나요?

4052 단어 HTML5자바스크립트캔버스

canvas를 사용해 보았습니다.



처음으로 HTML5 캔버스를 사용해 보았습니다.
이유는, 간단한 화상을 표시하고 싶었습니다만, 화상 소프트로 만드는 것도 번거롭기 때문에, 우선 시험해 보았다고 하는 것입니다. 결과는 잘 작동했습니다.

자바스크립트를 쓸 장소



여기서 잃어버린 것은 JavaScript를 작성하는 곳입니다.
필자는 HTML 문서에서 수식을 표시하기 위해 MathJax를 사용하고 있습니다. 에 업할 때는, cdn.mathjax.org에 읽으러 가도록(듯이) 하고 있습니다. 또 문서 작성시는, 헤더나 푸더, 장식을 고집하지 않습니다만, 사이트에 업할 때는 이것들을 덧붙이도록 하고 있습니다.
이 때문에, <body> </body> 사이를 읽어, 이것에 헤더나 푸더를 더한 프로그램을 만들어 처리하고 있습니다.

여기서 canvas에 대해 넷에서 조사해 보았습니다만, 내용을 나타내는 JavaScript는 <head> </head> 사이에 쓰고 있는 사례가 많다고 생각했습니다. 그러나 위에서 설명한 작업을 수행 할 때 canvas가있는 페이지 만 canvas 용 JavaScript를 포함하는 다른 헤더로 만드는 것은 어려울 수 있습니다. 거기에 묘하게 긴 헤더는 그다지 멋지지 않다(개인적 취미).
그래서, 여러가지 검색해 보면, 일반적으로 JavaScript는 </body> 의 앞에 쓰는 것이 좋다.

참고 사이트
htp // wpp. 인후 / tpl_레 p. php? t = js - Bigine r & fl = r2

그래서 다음 HTML 문서를 만들려고 시도한 결과 잘 표시되었습니다.
내 Mac의 Safari에서의 표시 결과는 그림과 같습니다.

테스트용 HTML 문서


<!DOCTYPE html>
<html>
<head>
<script src="/Users/kk/mathjax/MathJax.js?config=TeX-AMS_HTML">
<!--<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">-->
MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\$","\\$"]] } });
</script>
</head>
<body>

<h4>点と直線の距離</h4>
<p>点$(x_g,z_g)$から直線$z=a'*x+b'$への最短距離となる直線上の点$(x_x,z_z)$は以下のとおり求められる．</p>
<div class="eq">
\begin{equation}
\begin{cases}
&x_x=\cfrac{x_g+z_g*a'-a'*b'}{1+a'*a'} \\
&z_z=a'*x_x+b'
\end{cases}
\end{equation}
</div>

<canvas id="sample1" width="170" height="150" style="background-color:transparent;">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>

<p>四角形要素は4節点で構成されるが，4点を通る平面は空間中に設定できない．
このため，四角形要素を構成する節点を，半時計回りに4組の3点に分けて考え，ある圧力を示す点を特定する．
ここで要素節点番号を(1,2,3,4)とすれば，三角形を構成できる節点の組み合わせは，(1,2,3)，(2,3,4)，(3,4,1)，(4,1,2)となる．</p>

<canvas id="sample2" width="170" height="150" style="background-color:transparent;">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>

<script type="text/javascript">
onload=function(){
    test1();
    test2();
}
function test1(){
  var canvas = document.getElementById('sample1');
  if (canvas.getContext) {
    var context = canvas.getContext('2d');
    //左から50上から50の位置に、幅70高さ50の四角形を描く
    context.strokeRect(50,50,70,50);
    context.fillStyle = 'rgb(0,0,0)';
    context.beginPath()
    context.moveTo(50,50);
    context.lineTo(120,100);
    context.moveTo(50,100);
    context.lineTo(120,50);
    context.stroke();
    context.font="16px sans-serif"
    context.textAlign="center"
    context.fillText( '1', 45, 115 );
    context.fillText( '2',125, 115 );
    context.fillText( '3',125,  45 );
    context.fillText( '4', 45,  45 );
   }
}
function test2(){
  var canvas = document.getElementById('sample2');
  if (canvas.getContext) {
    var context = canvas.getContext('2d');
    //左から20上から20の位置に、幅80高さ60の四角形を描く
    context.strokeRect(20,20,80,60);
    context.fillStyle = 'rgb(0,0,0)';
    context.beginPath()
    context.moveTo(20,20);
    context.lineTo(100,80);
    context.moveTo(20,80);
    context.lineTo(100,20);
    context.stroke();
    context.font="32px sans-serif"
    context.textAlign="center"
    context.strokeText( 'Mail', 60, 50 );
   }
}
</script>

</body>
</html>

Safari의 표시 결과





그 이상
레이더 차트
[Vue.js] [Vuex] Canvas의 한계값

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage