{"id":798,"date":"2010-05-24T22:26:21","date_gmt":"2010-05-24T13:26:21","guid":{"rendered":"http:\/\/devel.vitalify.jp\/wp_admin\/?p=798"},"modified":"2012-11-12T19:53:13","modified_gmt":"2012-11-12T10:53:13","slug":"canvas","status":"publish","type":"post","link":"https:\/\/vitalify.jp\/blog\/2010\/05\/canvas.html","title":{"rendered":"CANVAS\u4f7f\u3063\u3066\u307f\u305f"},"content":{"rendered":"

\u8a71\u984c\u306eCANVAS\u4f7f\u3063\u3066\u307f\u307e\u3057\u305f\u3002
Javascript\u3068\u3057\u3066\u306f\u6614\u3068\u7279\u306b\u5909\u308f\u3063\u3066\u306a\u3044\u3067\u3059\u306d\u3068\u3044\u3046\u306e\u304c\u5370\u8c61\u3067\u3059\u304c…\uff08\u307e\u3041WEB\u6a19\u6e96\u306b\u6b63\u5f0f\u306b\u53d6\u308a\u5165\u308c\u3089\u308c\u305f\u3053\u3068\u304c\u5927\u4e8b\u3067\u3059\uff01\uff09
Processing\u3084AS\u3067\u7d75\u3092\u63cf\u3044\u305f\u3053\u3068\u304c\u3042\u308b\u4eba\u306a\u3089\u7279\u306b\u62b5\u6297\u306a\u304f\u53d7\u3051\u5165\u308c\u3089\u308c\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n

\u307e\u3041\u50d5\u3082\u89e6\u3063\u305f\u3070\u3063\u304b\u308a\u3067\u307e\u305a\u306f\u5186\u3092\u63cf\u3044\u3066\u307f\u305f\u308a\u3068\u304b\u3044\u3046\u30ec\u30d9\u30eb\u3067\u3059\u304c\u3002
\u3061\u3083\u3093\u3068\u3084\u308c\u3070\u52a0\u5de5\u3068\u304b\u3082\u3067\u304d\u305d\u3046\u306a\u306e\u3067\u3061\u3083\u3093\u3068\u3084\u308a\u307e\u3057\u3087\u3046\u3002<\/p>\n

\u3068\u3044\u3046\u3053\u3068\u3067\u3067\u304d\u305f\u306e\u304c\u3053\u308c\u3067\u3059\u3002
\u305f\u3076\u3093IE\u306e\u4eba\u306f\u6b8b\u5ff5\u306a\u7d50\u679c\u3067\u3059\u3002Safari\u304bFirefox\u3067\u3002iPhone\u3067\u3082\u898b\u308c\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u307e\u3057\u305f\u3002
\u305b\u3063\u304b\u304f\u306a\u306e\u3067HTML5\u3063\u307d\u304f\u3057\u3068\u304d\u307e\u3057\u305f<\/p>\n

\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8
<\/a> <\/p>\n

<\/div>\n
<\/div>\n

\"canvas.jpg\"<\/span><\/p>\n

<\/div>\n
<\/div>\n


\n\u306a\u3093\u304b\u3053\u3046\u3044\u3046\u611f\u3058\u306a\u3089\u30b5\u30a4\u30c8\u306e\u30c8\u30c3\u30d7\u3068\u304b\u3067\u3082\u4f7f\u3048\u305d\u3046\u3067\u3059\u306d\u30fc\u3068\u3044\u3046\u30a4\u30e1\u30fc\u30b8\u3067
\u5186\u306e\u4f4d\u7f6e\/\u5927\u304d\u3055\/\u8272\/\u900f\u660e\u5ea6\u3092\u3059\u3079\u3066\u30e9\u30f3\u30c0\u30e0\u3067\u751f\u6210\u3057\u3066\u3044\u308b\u3060\u3051\u3067\u3059\u3002
100\u56de\u306b\u4e00\u56de\u306e\u78ba\u7acb\u3067\u3059\u3079\u3066\u3092\u30af\u30ea\u30a2\u3001\u3064\u3044\u3067\u306b\u30de\u30a6\u30b9\u8ffd\u5f93\u3067\u6c17\u6301\u3061\u60aa\u3044\u611f\u3058\u3067\u5186\u3092\u751f\u6210\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n

\u3053\u308c\u3067\u30b3\u30fc\u30c9\u304c\u3053\u308c\u3060\u3051\u3067\u3059\u3002\u3053\u308c\u3060\u3068\u6c4e\u7528\u6027\u3082\u4f55\u3082\u306a\u3044\u306e\u3067\u3079\u305f\u66f8\u304d\u3067\u6c5a\u304f\u3066\u3059\u307f\u307e\u305b\u3093\u306d\uff01\u307b\u3093\u3068\u3002<\/p>\n

(function(){
\/\/canvas
window.addEventListener(\"load\",function(){
  \/\/first property
  var cvs = document.getElementById(\"canvasobj\");
  if (!cvs.getContext) return false;
  var ctx = cvs.getContext('2d');

  var max_x = cvs.width = window.innerWidth;
  var max_y = cvs.height = window.innerHeight;

  var offset_x = cvs.offsetLeft;
  var offset_y = cvs.offsetTop;

  var point_x = 0;
  var point_y = 0;
  var point_r = 0;
  var point_e = 0;
  var point_a = 0;

  var getRandColor = function(){
    var rgb = (Math.floor(Math.random()*0xffffff)).toString(16);
    for (i=6-rgb.length; i>0; i--) {
      rgb = \"0\"+rgb;
    }
    return \"#\"+rgb;
  };

  var createCircle = function(e){
    ctx.beginPath();
    if(e){
      point_x = e.clientX - offset_x;
      point_y = e.clientY - offset_y;
      point_r = Math.floor(((max_y + 1)\/10) * Math.random()+15);
    }else {
      point_x = Math.floor((max_x + 1) * Math.random());
      point_y = Math.floor((max_y + 1) * Math.random());
      point_r = Math.floor(((max_y + 1)\/4) * Math.random()+20);
      if(Math.floor((100 - 1 + 1) * Math.random() + 1) === 1) {
        ctx.clearRect(0,0,max_x,max_y);
      }
    }
    point_e = Math.PI+(Math.PI*2)\/2;
    point_a = ((1.0 - 0.1 + 1) * Math.random() + 0.1);
    ctx.arc(point_x,point_y,point_r,0,point_e,true);
    ctx.fill();
    ctx.fillStyle = getRandColor();
    ctx.globalAlpha = point_a;
    return ctx;
  };

  \/\/random
  setInterval(function(){
    createCircle();
  },60);

  \/\/with mouse
  cvs.addEventListener(\"mousemove\",function(e){
    createCircle(e);
  },false);
  
  \/\/clear
  cvs.addEventListener(\"click\",function(e){
    ctx.clearRect(0,0,max_x,max_y)
  },false);
  
  \/\/resize canvas area
  window.addEventListener(\"resize\",function(){
    cvs.width=window.innerWidth;
    cvs.height=window.innerHeight;
    max_x = window.innerWidth;
    max_y = window.innerHeight;
  },false);
},false);
})();<\/pre>\n
\u306a\u3093\u3068\u3044\u3046\u30b7\u30f3\u30d7\u30eb\uff01
\u7d14\u7c8b\u306bCANVAS\u95a2\u9023\u3067\u4f7f\u3063\u3066\u3044\u308b\u306e\u306f\u4ee5\u4e0b\u306e\u901a\u308a
  <\/p>\n
  \/\/canvas\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u547c\u3073\u51fa\u3057\u3066
  var cvs = document.getElementById(\"canvasobj\");
  \/\/\u5bfe\u5fdc\u5916\u30d6\u30e9\u30a6\u30b6\u3092\u62d2\u5426\u3057\u3066
  if (!cvs.getContext) return false;
  \/\/2d\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3092\u547c\u3073\u51fa\u3057
  var ctx = cvs.getContext('2d');<\/pre>\n
\u3053\u308c\u3060\u3051\u3067\u304a\u7d75\u304b\u304d\u306e\u6e96\u5099\u306f\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n
\u3042\u3068\u306f<\/p>\n
    \/\/\u30d1\u30b9\u3092\u66f8\u304d\u59cb\u3081\u307e\u3059\u3088\u5ba3\u8a00
    ctx.beginPath();
    \/\/\u5186\u3092\u63cf\u304f\u30e1\u30bd\u30c3\u30c9\u3002arc(x, y, \u534a\u5f84, \u5186\u306e\u59cb\u70b9, \u5186\u306e\u7d42\u70b9, \u56de\u8ee2\u65b9\u5411)
    ctx.arc(point_x,point_y,point_r,0,0,true);
    \/\/\u5857\u308a\u3064\u3076\u3057\u30e1\u30bd\u30c3\u30c9
    ctx.fill();
    \/\/\u5857\u308a\u3064\u3076\u3057\u8272\u30d7\u30ed\u30d1\u30c6\u30a3
    ctx.fillStyle = getRandColor();
    \/\/\u900f\u660e\u5ea6
    ctx.globalAlpha = point_a;
<\/pre>\n
\u5b9f\u8cea\u5186\u3092\u63cf\u3044\u3066\u3044\u308b\u306e\u306f\u3053\u308c\u3060\u3051\u3067\u3059\u3002\u30b7\u30f3\u30d7\u30eb\u3067\u3059\u306d\u3002<\/p>\n
\u3082\u3061\u308d\u3093\u8907\u96d1\u306a\u66f2\u7dda\u3092\u63cf\u304f\u306e\u3067\u3042\u308c\u3070\u30d9\u30b8\u30a7\u66f2\u7dda\u3092\u66f8\u304f\u306e\u3067\u8a2d\u5b9a\u3059\u308b\u5f15\u6570\u304c\u5897\u3048\u307e\u3059\u304c\u57fa\u672c\u7684\u306b\u306f\u8003\u3048\u65b9\u306f\u540c\u3058\u304f\u305f\u3060\u30dd\u30a4\u30f3\u30c8\u3068\u8a2d\u5b9a\u3092\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u6bce\u306b\u57cb\u3081\u8fbc\u3093\u3067\u3084\u308c\u3070\u63cf\u753b\u3057\u3066\u304f\u308c\u307e\u3059\u3002
\u8907\u96d1\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u3057\u305f\u308a\u3059\u308b\u3053\u3068\u3092\u8003\u3048\u308b\u3068Flash\u306e\u65b9\u304c\u9078\u629e\u80a2\u3068\u3057\u3066\u4e0a\u304c\u308b\u3053\u3068\u304c\u591a\u3044\u3068\u306f\u601d\u3044\u307e\u3059\u304c\u3001\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8\u306e\u3088\u3046\u306bHTML\u306e\u88cf\u5074\u306b\u7f6e\u3044\u3066\u80cc\u666f\u306e\u3088\u3046\u306b\u4f7f\u3046\u3002\u306a\u3069\u3067\u3042\u308c\u3070\u3053\u3061\u3089\u306e\u307b\u3046\u304c\u6271\u3044\u304c\u697d\u3067\u3059\u306d\u3002\uff08\u305f\u3060\u306eHTML\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306a\u306e\u3067\uff09<\/p>\n
\u53c2\u8003\uff1a
Canvas \u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb – MDC<\/a><\/p>\n
\n            
<\/div><\/fb:like><\/div>\n            
<\/g:plusone><\/div>\n            
 \"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>