Как изменить размер этого анимированного имени (canvas)

Я пытаюсь добавить анимированное имя like this на моем сайте Но размер этого анимированного имени слишком велик. Как изменить размер, без каких-либо ошибок.Как изменить размер этого анимированного имени (canvas)

Вот код:

<!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. Это означает, что обычные механики шрифтов, такие как размер, не применяются.

Вы можете изменить размер символов, масштабируя координаты пузырьков после их преобразования из гексагонального в пузырьковый массив.

Вот простой способ применения масштабирования. Вносятся изменения содержимого сценария 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

Awesome, но я ничего из этого длинного кода не понимая. Можете ли вы просто сказать мне, где я могу редактировать размер? Спасибо –

Я сделал, посмотрю на первый блок кода в своем ответе. Файл bubble.js не предоставляет API, который позволяет изменять размер букв. Вместо этого вам нужно загрузить файл long 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); размер = Math.round (размер * globalSizer); А затем сохраните модифицированный файл bubbles.js на своем сервере и укажите на него свою веб-страницу. –

Как изменить размер этого анимированного имени (canvas)

ответ

Смежные вопросы