이 애니메이션 이름 (캔버스)의 크기를 변경하는 방법

내 웹 사이트에 애니메이션 이름 like this을 추가하려고합니다. 하지만이 애니메이션 이름의 크기가 너무 큽니다. 버그없이 크기를 변경하는 법.이 애니메이션 이름 (캔버스)의 크기를 변경하는 방법

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script> 
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script> 
</head> 
    <body> 
<canvas id="myCanvas"></canvas> 
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"></script> 
    <script> 
var myName = "Codecademy"; 

var red = [0, 100, 63]; 
var orange = [40, 100, 60]; 
var green = [75, 100, 40]; 
var blue = [196, 77, 55]; 
var purple = [280, 50, 60]; 
var letterColors = [red, orange, green, blue, purple]; 

drawName(myName, letterColors); 

if(10 < 3) 
{ 
bubbleShape = 'square'; 
} 
else 
{ 
bubbleShape = 'circle'; 
} 

bounceBubbles(); 
</script> 
</body> 
</html>

출처

2016-08-15 KC Here

각 문자를 형성 거품은 alphabet.js 스크립트에서 데이터의 배열에 의해 결정된다 : 여기

는 코드입니다. 즉, 크기와 같은 일반 글꼴 메커니즘은 적용되지 않습니다.

거품이 16 진수에서 거품 배열로 변환 된 후 거품의 좌표를 조절하여 문자의 크기를 수정할 수 있습니다.

다음은 크기 조정을 적용하는 간단한 방법입니다. bubbles.js 스크립트의 내용이 변경되었습니다.

function Point(x, y, z, size, color) {  
var globalSizer = 0.3; 
x = Math.round(x * globalSizer); 
y = Math.round(y * globalSizer); 
z = Math.round(z * globalSizer); 
size = Math.round(size * globalSizer);

globalSizer의 값을 줄이면 문자가 축소됩니다.

var myName = "TinyTinyText"; 
 

 
var red = [0, 100, 63]; 
 
var orange = [40, 100, 60]; 
 
var green = [75, 100, 40]; 
 
var blue = [196, 77, 55]; 
 
var purple = [280, 50, 60]; 
 
var letterColors = [red, orange, green, blue, purple]; 
 

 
var canvas = $("#myCanvas"); 
 
var canvasHeight; 
 
var canvasWidth; 
 
var ctx; 
 
var pointCollection; 
 
    
 
document.rotationForce = 0.0; 
 
document.Friction = 0.85; 
 

 
var white = [0, 0, 100]; 
 
var black = [0, 0, 27]; 
 
var red = [0, 100, 63]; 
 
var orange = [40, 100, 60]; 
 
var green = [75, 100, 40]; 
 
var blue = [196, 77, 55]; 
 
var purple = [280, 50, 60]; 
 

 
drawName(myName, letterColors); 
 

 
if(10 < 3) 
 
{ 
 
bubbleShape = 'square'; 
 
} 
 
else 
 
{ 
 
bubbleShape = 'circle'; 
 
} 
 

 
bounceBubbles(); 
 
    
 
/* 
 

 
    -------------------------------------------------------------------------------------- 
 
     
 
    Bubble.js... 
 
     
 
    -------------------------------------------------------------------------------------- 
 

 
*/ 
 

 
function Vector(x, y, z) { 
 
    this.x = x; 
 
    this.y = y; 
 
    this.z = z; 
 
    
 
    this.set = function (x, y) { 
 
     this.x = x; 
 
     this.y = y; 
 
    }; 
 
} 
 
    
 
function PointCollection() { 
 
    this.mousePos = new Vector(0, 0); 
 
    this.pointCollectionX = 0; 
 
    this.pointCollectionY = 0; 
 
    this.points = []; 
 
    
 
    this.update = function() { 
 
     for (var i = 0; i < this.points.length; i++) { 
 
      var point = this.points[i]; 
 
    
 
      var dx = this.mousePos.x - point.curPos.x; 
 
      var dy = this.mousePos.y - point.curPos.y; 
 
      var dd = (dx * dx) + (dy * dy); 
 
      var d = Math.sqrt(dd); 
 
    
 
      point.targetPos.x = d < 150 ? point.curPos.x - dx : point.originalPos.x; 
 
      point.targetPos.y = d < 150 ? point.curPos.y - dy : point.originalPos.y; 
 
    
 
      point.update(); 
 
     } 
 
    }; 
 
    
 
    this.shake = function() { 
 
     var randomNum = Math.floor(Math.random() * 5) - 2; 
 
    
 
     for (var i = 0; i < this.points.length; i++) { 
 
      var point = this.points[i]; 
 
      var dx = this.mousePos.x - point.curPos.x; 
 
      var dy = this.mousePos.y - point.curPos.y; 
 
      var dd = (dx * dx) + (dy * dy); 
 
      var d = Math.sqrt(dd); 
 
      if (d < 50) { 
 
       this.pointCollectionX = Math.floor(Math.random() * 5) - 2; 
 
       this.pointCollectionY = Math.floor(Math.random() * 5) - 2; 
 
      } 
 
      point.draw(bubbleShape, this.pointCollectionX, this.pointCollectionY); 
 
     } 
 
    }; 
 
    
 
    this.draw = function (bubbleShape, reset) { 
 
     for (var i = 0; i < this.points.length; i++) { 
 
      var point = this.points[i]; 
 
    
 
      if (point === null) 
 
       continue; 
 
    
 
      if (window.reset) { 
 
       this.pointCollectionX = 0; 
 
       this.pointCollectionY = 0; 
 
       this.mousePos = new Vector(0, 0); 
 
      } 
 
    
 
      point.draw(bubbleShape, this.pointCollectionX, this.pointCollectionY, reset); 
 
     } 
 
    }; 
 
    
 
    this.reset = function (bubbleShape) {}; 
 
} 
 

 

 
    
 
function Point(x, y, z, size, color) { \t \t 
 
    var globalSizer = 0.3; 
 
    x = Math.round(x * globalSizer); 
 
    y = Math.round(y * globalSizer); 
 
    z = Math.round(z * globalSizer); 
 
    size = Math.round(size * globalSizer); 
 
    
 
    this.curPos = new Vector(x, y, z); 
 
    this.color = color; 
 
    
 
    this.friction = document.Friction; 
 
    this.rotationForce = document.rotationForce; 
 
    this.springStrength = 0.1; 
 
    
 
    this.originalPos = new Vector(x, y, z); 
 
    this.radius = size; 
 
    this.size = size; 
 
    this.targetPos = new Vector(x, y, z); 
 
    this.velocity = new Vector(0.0, 0.0, 0.0); 
 
    
 
    this.update = function() { 
 
     var dx = this.targetPos.x - this.curPos.x; 
 
     var dy = this.targetPos.y - this.curPos.y; 
 
     // Orthogonal vector is [-dy,dx] 
 
     var ax = dx * this.springStrength - this.rotationForce * dy; 
 
     var ay = dy * this.springStrength + this.rotationForce * dx; 
 
    
 
     this.velocity.x += ax; 
 
     this.velocity.x *= this.friction; 
 
     this.curPos.x += this.velocity.x; 
 
    
 
     this.velocity.y += ay; 
 
     this.velocity.y *= this.friction; 
 
     this.curPos.y += this.velocity.y; 
 
    
 
     var dox = this.originalPos.x - this.curPos.x; 
 
     var doy = this.originalPos.y - this.curPos.y; 
 
     var dd = (dox * dox) + (doy * doy); 
 
     var d = Math.sqrt(dd); 
 
    
 
     this.targetPos.z = d/100 + 1; 
 
     var dz = this.targetPos.z - this.curPos.z; 
 
     var az = dz * this.springStrength; 
 
     this.velocity.z += az; 
 
     this.velocity.z *= this.friction; 
 
     this.curPos.z += this.velocity.z; 
 
    
 
     this.radius = this.size * this.curPos.z; 
 
     if (this.radius < 1) this.radius = 1; 
 
    }; 
 
    
 
    this.draw = function (bubbleShape, dx, dy) { 
 
     ctx.fillStyle = this.color; 
 
     if (bubbleShape == "square") { 
 
      ctx.beginPath(); 
 
      ctx.fillRect(this.curPos.x + dx, this.curPos.y + dy, this.radius * 1.5, this.radius * 1.5); 
 
     } else { 
 
      ctx.beginPath(); 
 
      ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius, 0, Math.PI * 2, true); 
 
      ctx.fill(); 
 
     } 
 
    }; 
 
} 
 
    
 
function makeColor(hslList, fade) { 
 
    var hue = hslList[0] /*- 17.0 * fade/1000.0*/ ; 
 
    var sat = hslList[1] /*+ 81.0 * fade/1000.0*/ ; 
 
    var lgt = hslList[2] /*+ 58.0 * fade/1000.0*/ ; 
 
    return "hsl(" + hue + "," + sat + "%," + lgt + "%)"; 
 
} 
 
    
 
function phraseToHex(phrase) { 
 
    var hexphrase = ""; 
 
    for (var i = 0; i < phrase.length; i++) { 
 
     hexphrase += phrase.charCodeAt(i).toString(16); 
 
    } 
 
    return hexphrase; 
 
} 
 
    
 
function initEventListeners() { 
 
    $(window).bind('resize', updateCanvasDimensions).bind('mousemove', onMove); 
 
    
 
    canvas.ontouchmove = function (e) { 
 
     e.preventDefault(); 
 
     onTouchMove(e); 
 
    }; 
 
    
 
    canvas.ontouchstart = function (e) { 
 
     e.preventDefault(); 
 
    }; 
 
} 
 
    
 
function updateCanvasDimensions() { 
 
    canvas.attr({ 
 
     height: 500, 
 
     width: 1000 
 
    }); 
 
    canvasWidth = canvas.width(); 
 
    canvasHeight = canvas.height(); 
 
    draw(); 
 
} 
 
    
 
function onMove(e) { 
 
    if (pointCollection) { 
 
     pointCollection.mousePos.set(e.pageX - canvas.offset().left, e.pageY - canvas.offset().top); 
 
    } 
 
} 
 
    
 
function onTouchMove(e) { 
 
    if (pointCollection) { 
 
     pointCollection.mousePos.set(e.targetTouches[0].pageX - canvas.offset().left, e.targetTouches[0].pageY - canvas.offset().top); 
 
    } 
 
} 
 
    
 
function bounceName() { 
 
    shake(); 
 
    setTimeout(bounceName, 30); 
 
} 
 
    
 
function bounceBubbles() { 
 
    draw(); 
 
    update(); 
 
    setTimeout(bounceBubbles, 30); 
 
} 
 
    
 
function draw(reset) { 
 
    var tmpCanvas = canvas.get(0); 
 
    
 
    if (tmpCanvas.getContext === null) { 
 
     return; 
 
    } 
 
    
 
    ctx = tmpCanvas.getContext('2d'); 
 
    ctx.clearRect(0, 0, canvasWidth, canvasHeight); 
 
    
 
    bubbleShape = typeof bubbleShape !== 'undefined' ? bubbleShape : "circle"; 
 
    
 
    if (pointCollection) { 
 
     pointCollection.draw(bubbleShape, reset); 
 
    } 
 
} 
 
    
 
function shake() { 
 
    var tmpCanvas = canvas.get(0); 
 
    
 
    if (tmpCanvas.getContext === null) { 
 
     return; 
 
    } 
 
    
 
    ctx = tmpCanvas.getContext('2d'); 
 
    ctx.clearRect(0, 0, canvasWidth, canvasHeight); 
 
    
 
    bubbleShape = typeof bubbleShape !== 'undefined' ? bubbleShape : "circle"; 
 
    
 
    if (pointCollection) { 
 
     pointCollection.shake(bubbleShape); 
 
    } 
 
} 
 
    
 
function update() { 
 
    if (pointCollection) 
 
     pointCollection.update(); 
 
} 
 
    
 
function drawName(name, letterColors) { 
 
    updateCanvasDimensions(); 
 
    var g = []; 
 
    var offset = 0; 
 
    
 
    function addLetter(cc_hex, ix, letterCols) { 
 
     if (typeof letterCols !== 'undefined') { 
 
      if (Object.prototype.toString.call(letterCols) === '[object Array]' && Object.prototype.toString.call(letterCols[0]) === '[object Array]') { 
 
       letterColors = letterCols; 
 
      } 
 
      if (Object.prototype.toString.call(letterCols) === '[object Array]' && typeof letterCols[0] === "number") { 
 
       letterColors = [letterCols]; 
 
      } 
 
     } else { 
 
      // if undefined set black 
 
      letterColors = [[0, 0, 27]]; 
 
     } 
 
    
 
     if (document.alphabet.hasOwnProperty(cc_hex)) { 
 
      var chr_data = document.alphabet[cc_hex].P; 
 
      var bc = letterColors[ix % letterColors.length]; 
 
    
 
      for (var i = 0; i < chr_data.length; ++i) { 
 
       point = chr_data[i]; 
 
    
 
       g.push(new Point(point[0] + offset, 
 
        point[1], 
 
        0.0, 
 
        point[2], 
 
        makeColor(bc, point[3]))); 
 
      } 
 
      offset += document.alphabet[cc_hex].W; 
 
     } 
 
    } 
 
    
 
    var hexphrase = phraseToHex(name); 
 
    
 
    var col_ix = -1; 
 
    for (var i = 0; i < hexphrase.length; i += 2) { 
 
     var cc_hex = "A" + hexphrase.charAt(i) + hexphrase.charAt(i + 1); 
 
     if (cc_hex != "A20") { 
 
      col_ix++; 
 
     } 
 
     addLetter(cc_hex, col_ix, letterColors); 
 
    } 
 
    
 
    for (var j = 0; j < g.length; j++) { 
 
     g[j].curPos.x = (canvasWidth/2 - offset/2) + g[j].curPos.x; 
 
     g[j].curPos.y = (canvasHeight/2 - 105) + g[j].curPos.y; 
 
     g[j].originalPos.x = (canvasWidth/2 - offset/2) + g[j].originalPos.x; 
 
     g[j].originalPos.y = (canvasHeight/2 - 105) + g[j].originalPos.y; 
 
    } 
 
    
 
    pointCollection = new PointCollection(); 
 
    pointCollection.points = g; 
 
    initEventListeners(); 
 
} 
 
    
 
window.reset = false; 
 
    
 
$(window).mouseleave(function() { 
 
    window.reset = true; 
 
}); 
 
    
 
$(window).mouseenter(function() { 
 
    window.reset = false; 
 
}); 
 
    
 

 
    
 
setTimeout(updateCanvasDimensions, 30);

<script src="https://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<canvas id="myCanvas"></canvas>

출처

2016-08-15 19:40:55

최고,하지만 난 그 긴 코드로부터 아무것도 이해하지 오전 : 여기에 모든 일의 작업입니다. 사이즈를 편집 할 수있는 곳만 알려주시겠습니까? 감사합니다 –

나는 내 대답에 코드의 첫 번째 블록을 보았다. bubble.js 파일은 글자의 크기를 변경할 수있는 API를 노출하지 않습니다. 대신 긴 bubbles.js 파일을 다운로드하고 "function Point (x, y, z, size, color) {"라는 행을 찾은 다음 다음과 같은 코드를 삽입하십시오. var globalSizer = 0.3; x = Math.round (x * globalSizer); y = Math.round (y * globalSizer); z = Math.round (z * globalSizer); size = Math.round (size * globalSizer); 그런 다음 수정 된 bubbles.js 파일을 서버에 저장하고 웹 페이지를 가리켜 야합니다. –

이 애니메이션 이름 (캔버스)의 크기를 변경하는 방법

답변

관련 문제