mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

"added ellipse background gradient generation"

Browse Source
This commit is contained in:
André Fiedler 2012-03-10 15:31:16 +00:00
parent fe4d2c5b81
commit d1dec8712e
3 changed files with 84 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/Generate.js
View File

@ -206,7 +206,7 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
case '-o-radial-gradient': case '-o-radial-gradient':
gradient = { gradient = {
type: 'radial', type: 'circle',
x0: 0, x0: 0,
y0: 0, y0: 0,
x1: bounds.width, x1: bounds.width,
@ -256,7 +256,7 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
); );
} else { // ellipse } else { // ellipse
h2clog('No ellipse gradient supported by now, cause canvas can´t draw ellipse :('); gradient.type = m2[0];
gradient.rx = Math.max( gradient.rx = Math.max(
gradient.cx, gradient.cx,
@ -279,7 +279,7 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
); );
} else { // ellipse } else { // ellipse
h2clog('No ellipse gradient supported by now, cause canvas can´t draw ellipse :('); gradient.type = m2[0];
gradient.rx = Math.min( gradient.rx = Math.min(
gradient.cx, gradient.cx,
@ -339,40 +339,75 @@ _html2canvas.Generate.Gradient = function(src, bounds) {
img = new Image(); img = new Image();
if(gradient && gradient.type === 'linear'){ if(gradient){
grad = ctx.createLinearGradient(gradient.x0, gradient.y0, gradient.x1, gradient.y1); if(gradient.type === 'linear'){
grad = ctx.createLinearGradient(gradient.x0, gradient.y0, gradient.x1, gradient.y1);
for (i = 0, len = gradient.colorStops.length; i < len; i+=1) {
try {
grad.addColorStop(gradient.colorStops[i].stop, gradient.colorStops[i].color);
}
catch(e) {
h2clog(['failed to add color stop: ', e, '; tried to add: ', gradient.colorStops[i], '; stop: ', i, '; in: ', src]);
}
}
ctx.fillStyle = grad;
ctx.fillRect(0, 0, bounds.width, bounds.height);
for (i = 0, len = gradient.colorStops.length; i < len; i+=1) { img.src = canvas.toDataURL();
try { } else if(gradient.type === 'circle'){
grad.addColorStop(gradient.colorStops[i].stop, gradient.colorStops[i].color);
grad = ctx.createRadialGradient(gradient.cx, gradient.cy, 0, gradient.cx, gradient.cy, gradient.rx);
for (i = 0, len = gradient.colorStops.length; i < len; i+=1) {
try {
grad.addColorStop(gradient.colorStops[i].stop, gradient.colorStops[i].color);
}
catch(e) {
h2clog(['failed to add color stop: ', e, '; tried to add: ', gradient.colorStops[i], '; stop: ', i, '; in: ', src]);
}
} }
catch(e) {
h2clog(['failed to add color stop: ', e, '; tried to add: ', gradient.colorStops[i], '; stop: ', i, '; in: ', src]); ctx.fillStyle = grad;
ctx.fillRect(0, 0, bounds.width, bounds.height);
img.src = canvas.toDataURL();
} else if(gradient.type === 'ellipse'){
// draw circle
var canvasRadial = document.createElement('canvas'),
ctxRadial = canvasRadial.getContext('2d'),
ri = Math.max(gradient.rx, gradient.ry),
di = ri * 2, imgRadial;
canvasRadial.width = canvasRadial.height = di;
grad = ctxRadial.createRadialGradient(gradient.rx, gradient.ry, 0, gradient.rx, gradient.ry, ri);
for (i = 0, len = gradient.colorStops.length; i < len; i+=1) {
try {
grad.addColorStop(gradient.colorStops[i].stop, gradient.colorStops[i].color);
}
catch(e) {
h2clog(['failed to add color stop: ', e, '; tried to add: ', gradient.colorStops[i], '; stop: ', i, '; in: ', src]);
}
} }
ctxRadial.fillStyle = grad;
ctxRadial.fillRect(0, 0, di, di);
imgRadial = new Image();
imgRadial.src = canvasRadial.toDataURL();
// transform circle to ellipse
ctx.fillStyle = gradient.colorStops[i - 1].color;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(imgRadial, gradient.cx - gradient.rx, gradient.cy - gradient.ry, 2 * gradient.rx, 2 * gradient.ry);
img.src = canvas.toDataURL();
} }
ctx.fillStyle = grad;
ctx.fillRect(0, 0, bounds.width, bounds.height);
img.src = canvas.toDataURL();
} else if(gradient && gradient.type === 'radial'){
// TODO: Add support for "ellipsis" drawing
grad = ctx.createRadialGradient(gradient.cx, gradient.cy, 0, gradient.cx, gradient.cy, gradient.rx);
for (i = 0, len = gradient.colorStops.length; i < len; i+=1) {
try {
grad.addColorStop(gradient.colorStops[i].stop, gradient.colorStops[i].color);
}
catch(e) {
h2clog(['failed to add color stop: ', e, '; tried to add: ', gradient.colorStops[i], '; stop: ', i, '; in: ', src]);
}
}
ctx.fillStyle = grad;
ctx.fillRect(0, 0, bounds.width, bounds.height);
img.src = canvas.toDataURL();
} }
return img; return img;

20
tests/background.html
View File

@ -170,18 +170,18 @@
background: radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%); background: radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
} }
.radialGradient7 { .radialGradient7 {
background: -moz-radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%); background: -moz-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%); background: -webkit-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
background: -o-radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%); background: -o-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
background: -ms-radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%); background: -ms-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
background: radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%); background: radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
} }
.radialGradient8 { .radialGradient8 {
background: -moz-radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%); background: -moz-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%); background: -webkit-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -o-radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%); background: -o-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -ms-radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%); background: -ms-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
background: radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%); background: radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
} }
.radialGradient9 { .radialGradient9 {
background: -moz-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%); background: -moz-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);

12
tests/qunit/unit/generate.js
View File

@ -104,7 +104,7 @@ $(function() {
] ]
}, },
{ {
type: "radial", type: "ellipse",
x0: 0, x0: 0,
y0: 0, y0: 0,
x1: 50, x1: 50,
@ -129,7 +129,7 @@ $(function() {
] ]
}, },
{ {
type: "radial", type: "circle",
x0: 0, x0: 0,
y0: 0, y0: 0,
x1: 50, x1: 50,
@ -154,7 +154,7 @@ $(function() {
] ]
}, },
{ {
type: "radial", type: "ellipse",
x0: 0, x0: 0,
y0: 0, y0: 0,
x1: 50, x1: 50,
@ -179,7 +179,7 @@ $(function() {
] ]
}, },
{ {
type: "radial", type: "circle",
x0: 0, x0: 0,
y0: 0, y0: 0,
x1: 50, x1: 50,
@ -204,7 +204,7 @@ $(function() {
] ]
}, },
{ {
type: "radial", type: "ellipse",
x0: 0, x0: 0,
y0: 0, y0: 0,
x1: 50, x1: 50,
@ -229,7 +229,7 @@ $(function() {
] ]
}, },
{ {
type: "radial", type: "circle",
x0: 0, x0: 0,
y0: 0, y0: 0,
x1: 50, x1: 50,