Javascript로 음식을 맛있게 보인다 (그 외 외 오버레이)

18738 단어 HTML5자바스크립트캔버스
음식을 맛있게 보인다
외에 오버레이에 대한 소개

이미지 위에서 왜곡이 나오므로
뭐든지 맛있을 것 같습니다.

HTML5 캔버스를 사용하여 움직이는 왜곡을 그립니다.
왜곡은 작을수록 속도가 빨라지면 현실이 높아집니다.

Javascript에서
객체 지향적 인 쓰기에 도전하고,
메인 프로그램을 50행으로 맞추는 궁리를 하고 있습니다.



샘플:
h tp // w w. 쉬웠다. 이 m / rks / 쿠이타 / 그 외 ゔ ぇ r ぁ y /

index.html
<!DOCTYPE html>
<html>
<head>
<title>おいしいたこ焼き屋</title>
<script type="text/javascript" src="HokahokaLib.js"></script>
<script type="text/javascript" src="Hokahoka.js"></script>
</head>
<body>
    <canvas id="okonomiyaki_canvas" width="200" height="200"></canvas>
</body>
</html>

HokahokaLib.js
//--
// Graphics
// ref.http://www.saturn.dti.ne.jp/npaka/html5/GraphicsEx/index.html
//--


function Graphics(canvas) {
    this.canvas =canvas;
    this.context=canvas.getContext("2d");
    this.loadingCount=0;
}

Graphics.prototype.getLoadingCount=function() {
    return this.loadingCount;
}

Graphics.prototype.clearRect=function(x,y,w,h) {
    this.context.clearRect(x,y,w,h);
}

Graphics.prototype.loadImage=function(src) {
    this.loadingCount++;
    var image=new Image();
    var source=this;
    image.onload=function() {
        source.loadingCount--;
    }
    image.src=src;
    return image;
}

Graphics.prototype.drawImage=function(image,x,y) {
    this.context.drawImage(image,x,y);
}

Graphics.prototype.drawYuge=function(point,r) {

    var i;
    for(i=0;i<r;i+=2){
        this.context.fillStyle = "rgba(255,255,255,0.05)";
        this.context.beginPath();
        this.context.arc(point.x,point.y+i/3,i,0,Math.PI*2,true);
        this.context.fill();
    }
}

Graphics.prototype.getWidth=function() {
    return this.canvas.width;
}
Graphics.prototype.getHeight=function() {
    return this.canvas.height;
}


//--
// Point
//--


function Point(x,y){
  this.x = x;
  this.y = y;
  return this;
}
Point.prototype.add = function( point ){
  this.x += point.x;
  this.y += point.y;
}

Hokahoka.js
var YUGE_NUM= 5;
var YUGE_SIZE = 20;

var g,image,i;

var pos = new Array(YUGE_NUM);
var vect = new Array(YUGE_NUM);

window.onload=function() {

    g=new Graphics($("okonomiyaki_canvas"));

    image=g.loadImage("okonomiyaki.jpg");

    //initialize
    for (i = 0; i < YUGE_NUM; i++) {
        pos[i] =  new Point(
            Math.random()*g.getWidth(),
            Math.random()*g.getHeight());
        vect[i] = new Point(0,0);
    }

    setInterval("motion()",50);
}

function motion() {

    if (g.getLoadingCount()>0) return;

    g.clearRect(0,0,g.getWidth(),g.getHeight());
    g.drawImage(image,0,0);

    for (i = 0; i < YUGE_NUM; i++) {

        g.drawYuge(pos,YUGE_SIZE);

        pos[i].add(vect[i]);
        vect[i].add(new Point((1-Math.random()*2)*0.2,-0.1));

        if(pos[i].y<-YUGE_SIZE){
            pos[i] =  new Point(
                Math.random()*g.getWidth(),
                Math.random()*g.getHeight());
            vect[i] = new Point(0,-1);
        }
    }
}

function $(id) {
    return document.getElementById(id);
}
Canvas에서 오각형을 쓰다
three.js의 CanvasRenderer가 일부 Windows에서 잘 작동하지 않는 문제와 대응

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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