JavaScript+HTML5 Canvas制作色彩斑斓的正方形效果,通常可以通过以下步骤实现:
- 创建canvas元素,并设置画布大小。
<canvas id="myCanvas" width="500" height="500"></canvas>
- 获取canvas元素和绘图上下文'2d'。
const canvas = document.querySelector('#myCanvas');
const ctx = canvas.getContext('2d');
- 创建一个函数来绘制正方形。
function drawSquare(x, y, size, r, g, b){
ctx.fillStyle = `rgb(${r}, ${g}, ${b})`; // 设置填充颜色
ctx.fillRect(x, y, size, size); // 绘制矩形
}
函数参数x,y是矩形左上角的坐标,size是矩形的大小,而r、g、b指定了填充颜色。
- 创建一个循环来绘制一系列的正方形。
for(let i = 0; i < canvas.width; i += 20){
for(let j = 0; j < canvas.height; j += 20){
drawSquare(i, j, 18, Math.random() * 255, Math.random() * 255, Math.random() * 255); // 绘制大小为18的矩形
}
}
这里for循环中的两个变量i和j表示正方形在x轴和y轴的坐标位置。每次循环会生成一个随机的填充颜色,然后用drawSquare函数绘制正方形。
- 最后将完整代码映射到HTML页面中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Colorful Squares</title>
</head>
<body>
<h1>Colorful Squares</h1>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
const canvas = document.querySelector('#myCanvas');
const ctx = canvas.getContext('2d');
function drawSquare(x, y, size, r, g, b){
ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
ctx.fillRect(x, y, size, size);
}
for(let i = 0; i < canvas.width; i += 20){
for(let j = 0; j < canvas.height; j += 20){
drawSquare(i, j, 18, Math.random() * 255, Math.random() * 255, Math.random() * 255);
}
}
</script>
</body>
</html>
这段代码会在页面上生成一个带有彩色正方形的画布。
示例一:
下面是一些自定义的参数,在这个示例中,我们能看到,绘图的每个小正方形位置不同,而且它们的大小也不一样。颜色参数也使用了不同的色调。
for(let i = 0; i < canvas.width; i += 20){
for(let j = 0; j < canvas.height; j += 20){
drawSquare(i + 10, j + 10, Math.random() * 10 + 8, Math.random() * 100, Math.random() * 120, Math.random() * 255);
}
}
示例二:
在这个示例中,我们尝试使用动画效果来实现将彩色方块画布慢慢淡化的效果。我们可以通过使用clearRect函数在每一帧绘制前,把canvas画布内容清空以达到效果。
let opacityValue = 1; // 创建一个变量,用于控制canvas透明度
function draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height); // 每一帧都清空canvas内容
for(let i = 0; i < canvas.width; i += 20){
for(let j = 0; j < canvas.height; j += 20){
drawSquare(i, j, 18, Math.random() * 255, Math.random() * 255, Math.random() * 255);
}
}
opacityValue -= 0.005; // 逐渐减少透明度
if(opacityValue > 0){ // 如果透明度值还未降为0
requestAnimationFrame(draw); // 递归调用自身
ctx.globalAlpha = opacityValue; // 设置画布透明度
}
}
draw();
这样的效果过程中,灰色色调的小方块逐渐消失,最后画布变成了空白。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript+html5 canvas制作色彩斑斓的正方形效果 - Python技术站