Return to Answer

deleted 243 characters in body

edited Aug 21, 2019 at 1:07

32.6k
28
81
98

Here an ugly implementation in canvas. I tried this solution, but the results are worse than I expected, so here it is anyway.

Canvas example

 $("div").each(function() {   var CHARS = $(this).text().split('');   $(this).html("");   $.each(CHARS, function(index, char) {   var canvas = $("<canvas />")   .css("width", "40px")   .css("height", "40px")   .get(0);   $("div").append(canvas);   var ctx = canvas.getContext("2d");   var gradient = ctx.createLinearGradient(0, 0, 130, 0);   gradient.addColorStop("0", "blue");   gradient.addColorStop("0.5", "blue");   gradient.addColorStop("0.51", "red");   gradient.addColorStop("1.0", "red");   ctx.font = '130pt Calibri';   ctx.fillStyle = gradient;   ctx.fillText(char, 10, 130);   });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Example Text</div>

Here an ugly implementation in canvas. I tried this solution, but the results are worse than I expected, so here it is anyway.

Canvas example

 $("div").each(function(){   var CHARS = $(this).text().split('');   $(this).html("");   $.each(CHARS,function(index, char){   var canvas = $("<canvas />")   .css("width", "40px")   .css("height", "40px")   .get(0);   $("div").append(canvas);   var ctx = canvas.getContext("2d");   var gradient = ctx.createLinearGradient(0, 0, 130, 0);   gradient.addColorStop("0", "blue");   gradient.addColorStop("0.5", "blue");   gradient.addColorStop("0.51", "red");   gradient.addColorStop("1.0", "red");   ctx.font = '130pt Calibri';   ctx.fillStyle = gradient;   ctx.fillText(char, 10, 130);   });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Example Text</div>

Here an ugly implementation in canvas. I tried this solution, but the results are worse than I expected, so here it is anyway.

Canvas example

$("div").each(function() { var CHARS = $(this).text().split(''); $(this).html(""); $.each(CHARS, function(index, char) { var canvas = $("<canvas />") .css("width", "40px") .css("height", "40px") .get(0); $("div").append(canvas); var ctx = canvas.getContext("2d"); var gradient = ctx.createLinearGradient(0, 0, 130, 0); gradient.addColorStop("0", "blue"); gradient.addColorStop("0.5", "blue"); gradient.addColorStop("0.51", "red"); gradient.addColorStop("1.0", "red"); ctx.font = '130pt Calibri'; ctx.fillStyle = gradient; ctx.fillText(char, 10, 130); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Example Text</div>

Example code into a snippet

Source Link

edited Aug 21, 2018 at 14:46

Fiambre

http://jsfiddle.net/kLXmL/2/

 $("div").each(function(){ var CHARS = $(this).text().split(''); $(this).html(""); $.each(CHARS,function(index, char){ var canvas = $("<canvas />") .css("width", "40px") .css("height", "40px") .get(0); $("div").append(canvas); var ctx = canvas.getContext("2d"); var gradient = ctx.createLinearGradient(0, 0, 130, 0); gradient.addColorStop("0", "blue"); gradient.addColorStop("0.5", "blue"); gradient.addColorStop("0.51", "red"); gradient.addColorStop("1.0", "red"); ctx.font = '130pt Calibri'; ctx.fillStyle = gradient; ctx.fillText(char, 10, 130); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Example Text</div>

<div>Example Text</div> $(function(){ $("div").each(function(){ var CHARS = $(this).text().split(''); $(this).html(""); $.each(CHARS,function(index, char){ var canvas = $("<canvas />") .css("width", "40px") .css("height", "40px") .get(0); $("div").append(canvas); var ctx = canvas.getContext("2d"); var gradient = ctx.createLinearGradient(0, 0, 130, 0); gradient.addColorStop("0", "blue"); gradient.addColorStop("0.5", "blue"); gradient.addColorStop("0.51", "red"); gradient.addColorStop("1.0", "red"); ctx.font = '130pt Calibri'; ctx.fillStyle = gradient; ctx.fillText(char, 10, 130); }); }); });

http://jsfiddle.net/kLXmL/2/

<div>Example Text</div> $(function(){ $("div").each(function(){ var CHARS = $(this).text().split(''); $(this).html(""); $.each(CHARS,function(index, char){ var canvas = $("<canvas />") .css("width", "40px") .css("height", "40px") .get(0); $("div").append(canvas); var ctx = canvas.getContext("2d"); var gradient = ctx.createLinearGradient(0, 0, 130, 0); gradient.addColorStop("0", "blue"); gradient.addColorStop("0.5", "blue"); gradient.addColorStop("0.51", "red"); gradient.addColorStop("1.0", "red"); ctx.font = '130pt Calibri'; ctx.fillStyle = gradient; ctx.fillText(char, 10, 130); }); }); });

 $("div").each(function(){ var CHARS = $(this).text().split(''); $(this).html(""); $.each(CHARS,function(index, char){ var canvas = $("<canvas />") .css("width", "40px") .css("height", "40px") .get(0); $("div").append(canvas); var ctx = canvas.getContext("2d"); var gradient = ctx.createLinearGradient(0, 0, 130, 0); gradient.addColorStop("0", "blue"); gradient.addColorStop("0.5", "blue"); gradient.addColorStop("0.51", "red"); gradient.addColorStop("1.0", "red"); ctx.font = '130pt Calibri'; ctx.fillStyle = gradient; ctx.fillText(char, 10, 130); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Example Text</div>

Copy edited. In English, the subjective form of the singular first-person pronoun, "I", is capitalized, along with all its contractions such as I'll and I'm.

Source Link

edited May 11, 2014 at 19:59

Peter Mortensen

31.4k
22
110
134

Here an ugly implementation in canvas, i try. I tried this solution, but the results are worse than iI expected, so here it is anyway.

Canvas example

http://jsfiddle.net/kLXmL/2/

<div>Example Text</div> $(function(){  $("div").each(function(){ var CHARS = $(this).text().split(''); $(this).html(""); $.each(CHARS,function(index, char){ var canvas = $("<canvas />") .css("width", "40px") .css("height", "40px") .get(0); $("div").append(canvas); var ctx = canvas.getContext("2d"); var gradient=ctxgradient = ctx.createLinearGradient(0, 0, 130, 0); gradient.addColorStop("0", "blue"); gradient.addColorStop("0.5", "blue"); gradient.addColorStop("0.51", "red"); gradient.addColorStop("1.0", "red"); ctx.font = '130pt Calibri'; ctx.fillStyle=gradient; fillStyle = gradient; ctx.fillText(char, 10, 130); });       });  });

Here an ugly implementation in canvas, i try this solution but the results are worse than i expected, so here is anyway.

Canvas example

http://jsfiddle.net/kLXmL/2/

<div>Example Text</div> $(function(){  $("div").each(function(){ var CHARS = $(this).text().split(''); $(this).html(""); $.each(CHARS,function(index,char){ var canvas = $("<canvas />") .css("width","40px") .css("height","40px") .get(0); $("div").append(canvas); var ctx = canvas.getContext("2d"); var gradient=ctx.createLinearGradient(0,0,130,0); gradient.addColorStop("0","blue"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("0.51","red"); gradient.addColorStop("1.0","red"); ctx.font = '130pt Calibri'; ctx.fillStyle=gradient;  ctx.fillText(char,10,130); });       });  });

Here an ugly implementation in canvas. I tried this solution, but the results are worse than I expected, so here it is anyway.

Canvas example

http://jsfiddle.net/kLXmL/2/

<div>Example Text</div> $(function(){ $("div").each(function(){ var CHARS = $(this).text().split(''); $(this).html(""); $.each(CHARS,function(index, char){ var canvas = $("<canvas />") .css("width", "40px") .css("height", "40px") .get(0); $("div").append(canvas); var ctx = canvas.getContext("2d"); var gradient = ctx.createLinearGradient(0, 0, 130, 0); gradient.addColorStop("0", "blue"); gradient.addColorStop("0.5", "blue"); gradient.addColorStop("0.51", "red"); gradient.addColorStop("1.0", "red"); ctx.font = '130pt Calibri'; ctx.fillStyle = gradient; ctx.fillText(char, 10, 130); }); }); });

Source Link

answered May 9, 2014 at 19:33

Fiambre

Collectives™ on Stack Overflow

Return to Answer