AT4esNote: JavascriptとCanvasでBlogger描画

2012年10月24日水曜日

JavascriptとCanvasでBlogger描画

Canvasというものを使い，Blogger上で色々と描画してみようという．
Canvasといいつつも，実際にはHTMLのCanvasタグにJavascriptで数値等を与えると言った方がいいか．

という事で，取り敢えず線を一本引く．

-->

コードはこんな感じになりやす

<html>
<body>

 <script type="text/javascript">
<!--

function edge1(){
 
 var canvas = document.getElementById('area1');
 if (canvas.getContext) {

  var ed = canvas.getContext('2d');

  //clear
  ed.beginPath();
  ed.clearRect(0, 0, canvas.width, canvas.height);

  ed.beginPath();
  ed.beginPath();             
  ed.lineWidth = 1;        
  ed.strokeStyle="red";   
  ed.moveTo(10,50);          
  ed.lineTo(300,50);         
  ed.stroke();                
  
 }
}

// -->
</script>


 <form>
  <input type="button" value="draw edge" onClick="edge1()">
 </form>
 <br>

 <canvas id="area1" width="500" height="300" style="border: groove;">canvasTag
 </canvas>

</body>
</html>

AT4esNote

ad

2012年10月24日水曜日

JavascriptとCanvasでBlogger描画

0 件のコメント:

コメントを投稿