我在以下位置使用HTML5画布制作了一个多边形背景生成器:
http://codepen.io/rfalor/pen/LhinJ
这是相关代码:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var dataURL = canvas.toDataURL();
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('canvasImg').src = dataURL;
当用户单击画布,然后单击“准备图像”时,右键单击保存的图像的分辨率较低(300px x 150px),而不是画布分辨率。如何允许用户保存更高分辨率的图像?
问题是您要使用css而不是canvas元素的width
andheight
属性来调整画布的大小。这样做时,您仅拉伸画布而不增加元素的坐标空间。
我在您的代码中添加了以下内容
canvas.width = 700;
canvas.height = 396;
然后我不得不稍微改变一下您的随机函数以接受一个数字,因为它永远不会是500。
function randomize(num) {
var a = Math.floor(Math.random() * num);
return a;
}
现在您可以这样称呼您lineTo
的
ctx.lineTo(randomize(canvas.width), randomize(canvas.height));
ctx.lineTo(randomize(canvas.width), randomize(canvas.height));
但是我知道你可能希望它成为更让你不看形状的边缘比宽度和高度,但我想你可以解决这个问题了。
下面是完整修改的代码。
var canvas = document.getElementById('canvas');
function randomize(num) {
var a = Math.floor(Math.random() * num);
return a;
}
function sides() {
var a = Math.floor(Math.random() * 10);
return a;
}
function getRndColor() {
var r = 255 * Math.random() | 0,
g = 255 * Math.random() | 0,
b = 255 * Math.random() | 0,
alpha = 0.1; //Math.random().toFixed(1);
var final = 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')';
return final;
}
$('*').click(function () {
clearInterval(timer);
$('button').show();
});
$('button').click(function () {
$(this).css('left', '-400px');
$('h3').text("Right click and save a beautiful background!");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var dataURL = canvas.toDataURL();
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('canvasImg').src = dataURL;
$('#canvasImg').css('border', '5px solid black');
$('#canvas').hide();
$('#canvasImg').show();
});
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var left = true;
canvas.width = 700;
canvas.height = 396;
var timer = setInterval(function () {
for (var i = 1; i <= 1000; i++) {
ctx.beginPath();
if (left) {
ctx.moveTo(0, randomize(canvas.height));
left = false;
} else {
ctx.moveTo(randomize(canvas.width), 0);
left = true;
}
ctx.lineTo(randomize(canvas.width), randomize(canvas.height));
ctx.lineTo(randomize(canvas.width), randomize(canvas.height));
ctx.fillStyle = getRndColor();
ctx.fill();
}
}, 1000);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句